Open Closed

Auto-Complete Select #7284


User avatar
0
nabass created

hi sir according to this doc https://docs.abp.io/en/abp/8.2/UI/AspNetCore/AutoComplete-Select i follow the steps to make one value selection (i attached images) but i got this error and what is (@SelectedAuthor) from where you get this value ??

  • ABP Framework version: v8.0
  • UI Type: AMVC
  • Database System: EF Core (SQL Server)

16 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    This is the selected value; you can get it from a database or anywhere.

    This is ABP how to use it.

    https://github.com/abpframework/abp/blob/dev/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml#L42-L45

  • User Avatar
    0
    nabass created

    on my index there is a new object from Account so result still null for first time so error (forEach is not defined) appear i want to work on the API Result not OnGetAsync Result i have an API (data-autocomplete-api-url="/api/mainAccounting/JournalVoucherLine/GetAccountLookup")

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Could you please use suite to create a new project to reproduce the problem and share it with me? I will check it.

    my email is shiwei.liang@volosoft.com

  • User Avatar
    0
    nabass created

    hi it is not a simple project it's reports and a lot of logic so i will try to explain step by step 1- i have an (AccountViewModel) & (AccountLookups) in my cs code Account object values is NULL and it is logic because this is first time run the page ----------------------------------------------------------------------------------------------------------------- 2- in this image you will find two examples -- first one (red rectangle) is the normal select and the result is Good as you can see in third image this is the result for (red rectangle) as i mentioned

    -- second (yellow rectangle) is what i want to do (auto select) but i got the error (forEach) that i asked for so i want to get API Result to work on it so i want to get lookups values but still can not read it as you see if i used <option selected value="@Model.Account.AccountId">@Model.Account.AccountName</option>

    i will get no errors but it won't work because Account Object values is Null as i said and i want lookups which come from API Result

    so what should i do ?????????

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Try:

    <select asp-for="Account.AccountId"
        class-"auto-complete-select"
        data-autocomplete-api-url="/api/mainAccounting/JournalVoucherLine/GetAccountLookup"
        data-autocomplete-display-property="accountName"
        data-autocomplete-value-property="accountId"
        data-autocomplete-items-property="accounts"
        data-autocomplete-filter-param-name="filter"
        data-autocomplete-allow-clear="true">
     </select>
    

    Make sure the /api/mainAccounting/JournalVoucherLine/GetAccountLookup endpoint return result is correct

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I can only give this advice because I don't know the details of your project. Thanks for your understand.

    You can refer to the ABP code https://github.com/abpframework/abp/blob/dev/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml#L42-L45

    https://github.com/abpframework/abp/blob/dev/modules/cms-kit/src/Volo.CmsKit.Public.Application/Volo/CmsKit/Public/Blogs/BlogPostPublicAppService.cs#L64

  • User Avatar
    0
    nabass created

    hi API response is correct

    But still have no values :(

    may be this features won't work on this screen!! my logic is to select (account from & to) (date from & to) then click on (refresh button) and data will show on grid according to what i choose but as you saw account data is huge and i want from user to search and select what he want but no value as i mentioned so is this features just work if there is data on grid (like advanced filter) ???

  • User Avatar
    0
    nabass created

    i tried this according to response and still not work

    <select asp-for="Account.AccountId" class="auto-complete-select" data-autocomplete-api-url="/api/mainAccounting/JournalVoucherLine/GetAccountLookup" data-autocomplete-display-property="items.displayName" data-autocomplete-value-property="items.id" data-autocomplete-items-property="items" data-autocomplete-filter-param-name="filter" data-autocomplete-allow-clear="true"> </select>

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer
    <select asp-for="Account.AccountId"
        class="auto-complete-select"
        data-autocomplete-api-url="/api/mainAccounting/JournalVoucherLine/GetAccountLookup"
        data-autocomplete-display-property="displayName"
        data-autocomplete-value-property="id"
        data-autocomplete-items-property="items"
        data-autocomplete-filter-param-name="filter"
        data-autocomplete-allow-clear="true">
    </select>
    
    • data-autocomplete-display-property is the displayName not items.displayName
    • data-autocomplete-value-property is the id not items.id
    • data-autocomplete-items-property is the items

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    It works for me:

    [ControllerName("JournalVoucherLine")]
    [Route("api/mainAccounting/JournalVoucherLine")]
    public class JournalVoucherLineController : AbpController
    {
        [HttpGet]
        [Route("getAccountLookup")]
        public async Task<PagedResultDto<AccountResultDto>> GetAsync()
        {
            return new PagedResultDto<AccountResultDto>(2, new List<AccountResultDto>
            {
                new AccountResultDto() { DisplayName = "Test", Id = Guid.NewGuid() },
                new AccountResultDto() { DisplayName = "Test2", Id = Guid.NewGuid() }
            });
        }
    }
    
    public class AccountResultDto
    {
        public string DisplayName { get; set; }
    
        public Guid Id { get; set; }
    }
    
     <select asp-for="Account.AccountId"
            class="auto-complete-select"
            data-autocomplete-api-url="/api/mainAccounting/JournalVoucherLine/GetAccountLookup"
            data-autocomplete-display-property="displayName"
            data-autocomplete-value-property="id"
            data-autocomplete-items-property="items"
            data-autocomplete-filter-param-name="filter"
            data-autocomplete-allow-clear="true">
    </select>
    

  • User Avatar
    0
    nabass created

    very very very thank you and BIG thanks for efforts i appreciate that

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    :)

  • User Avatar
    0
    nabass created

    is there a docs to create the same logic of (inistialSelect2) but use it with advanced filter?? if i use it with create/edit modal it works good but what if i want to use it with advanced filter?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Here is the logic, you can check it.

    https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js#L78

  • User Avatar
    0
    nabass created

    will i use this function instead of getFilter() ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    No,

    If you want, you need to manually initialize Autocomplete

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 20, 2025, 18:00