1. Home
  2. Forum
  3. Blazor
  4. How to add a filter to query in autocomplete

How to add a filter to query in autocomplete

Hello,

I have the following autocomplete component:

<SfAutoComplete TValue="string" TItem="LoyaltyCards" Placeholder="Escriba el número de tarjeta"
Query="@(new Query().AddParams("$filter",$"cardstatus eq 0"))">
<SfDataManager Url=@($"{apiURL}/loyaltycards") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
<AutoCompleteFieldSettings Value="CardNumber"></AutoCompleteFieldSettings>
</SfAutoComplete>

I need to filter the data for another field in the API (cardstatus=0.
However, with this query the component does the following api request:

     http://localhost:60000/api/odata/loyaltycards?$filter=contains(tolower(CardNumber),'1')&$skip=0&$top=20&$filter=cardstatus eq 0

Returning an error because OData server canno handle two $filter parameters at the same time. The following query does work (one filter with an "and"):

     http://localhost:60000/api/odata/loyaltycards?$skip=0&$top=20&$filter=contains(tolower(CardNumber),'1') and cardstatus eq 0

Is there any way to handle the Query to emulate the latter format (or is there another solution)?

Thank you,

Erick


5 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team July 6, 2020 11:49 AM UTC

Hi Erick, 
 
Greetings from Syncfusion support. 
 
Based on your shared information with code example. We suspect that you want to perform the additional filter action in the autocomplete component. We would like to say this in our autocomplete component we have send the filter query when we type the character. In your sample you have send the query as same $filter so that the OData send the error. Please explain your exact scenario to add the filter query in the autocomplete we will provide the solution based on your requirement or please change the addparams variable name instead of $filter to resolve the issue. 
 
Regards, 
Sureshkumar P 


ER Erick July 6, 2020 05:44 PM UTC

Hello,

Let me explain further my scenario. I have two main parameters in my API, one is the card number and another is the card status. With the autocomplete component, the user is searching for the card number as he writes. The component automatically sends a request to the API with the numbers the user is typing. For example, if he writes 1, the component send $filter=contains(tolower(CardNumber),'1').

However, I need to show only card numbers where the other parameter card status is equal to 0. That's why I added the param $filter with "cardstatus eq 0".

I don't know how to merge both filters, the one that the component sends automatically as the user writes with the additional cardstatus=0;

Regards,

erick

SP Sureshkumar P Syncfusion Team July 7, 2020 01:14 PM UTC

Hi Erick, 
 
Thanks for your update. 
 
Based on your shared information. We suggest you use where query in the Query property instead of using $filter to resolve the issue. 
 
Kindly refer the below code example. 
 
<SfAutoComplete TValue="string" TItem="Order" PopupHeight="230px" Placeholder="Select a name" Query="@RemoteDataQuery"> 
    <SfDataManager Url="http://localhost:64956/odata/books" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor"></SfDataManager> 
    <AutoCompleteFieldSettings Text="Author" Value="Author" GroupBy="Title"></AutoCompleteFieldSettings> 
</SfAutoComplete> 
 
@code{ 
    public class Order 
    { 
        public int? Id { get; set; } 
        public string Title { get; set; } 
        public string Author { get; set; } 
        public double? Price { get; set; } 
    } 
    public Query RemoteDataQuery = new Query().Where("Price", "equal", 49.99).RequiresCount(); 
 
} 
 
 
We have created the sample based on your scenario. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/odatasample-256340974  
 
Regards, 
Sureshkumar P 


Marked as answer
ER Erick July 25, 2020 06:39 PM UTC

Sorry for the delay to answer this. I tried the solution and it works great. Thanks a lot.

Where can I find documentation of all the Query options?

Regards,

Erick

SP Sureshkumar P Syncfusion Team July 27, 2020 05:51 AM UTC

Hi Erick, 
 
Thanks for the update.  
 
You can find all the Query options by referring below documentations.  
 
 
 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon