How do I disable client-side filtering for AutoComplete?

[Shane Milton]

It seems to me that client-side filtering is forced upon me and my only options are BeginsWith and Contains. This is unacceptable as I have server-side filtering implemented and that filtering ends up searching amongst many different columns, not all of which are being returned to the client.

For example, let's say I have a list of places. My filtering searches both States and Countries tables in the database and searches both on name, abbreviation, default language, official bird, or official tree. I obviously don't want/need to send all of this data back, so I should be able to search on "Buckeye" and get "Ohio" back, even though "Buckeye" is not in the text "Ohio" that the AutoComplete control gets back. Or let's say I'm doing an Soundex query in SQL Server - this isn't even anything close to something I can put into an AutoComplete control, as far as I'm aware.

In all scenarios where it's affecting me, my JsonResult is exactly what I expect it to be but I always see a subset (often times 0 of those items) because it appears the AutoComplete control removes items that my server tells it to bind to.

Can we have a "None" filtering option, please?

[Shane Milton]

For now, I'm using a ComboBox which allows me to turn off a client-side filter. This functions fine for me (although I don't want the dropdown arrow). Can we get this to be possible for the AutoComplete as well, please?

[Georgi Krustev]

Hello Shane Milton,

Thank you for your feedback.

Our current plans does not include implementing this functionality. Nevertheless I will forward your suggestion to our developers for further investigation and collaboration. 

Kind regards,
Georgi Krustev
the Telerik team

[Shane Milton]

Really? It seems rather silly to me for all of these controls to not function the same as it pertains to handling data. Seems more difficult for Telerik to maintain and much more confusing and frustrating to your users. At least I have a good-enough solution although it looks somewhat unprofessional.

If you could provide some css that hides the dropdown arrow of a ComboBox to force it to look like an AutoComplete, that would help. I've hidden the dropdown arrow but there are some side-effects and I'm still stuck with some gray padding/margin or something that I can't figure out how to get rid of without causing other problems.

Many thanks, Georgi!
-Shane

[Georgi Krustev]

Hello Shane,

We have created PITS item  for the suggested functionality. You can vote for it. Depending on the interests we will decide whether to implement it.

If you still need to use AutoComplete UI component you can try this workaround, which will stop client-side filtering:

autocompleteLoad(e){
 var autocomplete = $(this).data('tAutoComplete');

 autocomplete.filter = 0;
 autocomplete.selectedIndex = 0;
 autocomplete.filters[0] = function(component) {
   if (!component.dropDown.$items) {
      component.dataBind(component.data, true /*if you need to preserve input content*/);
   }
 }
}

As you probably noticed you need to wire load event of the component to this event handler.

Regards,
Georgi Krustev
the Telerik team

[Mattias]

Hi,
I really need this functionality to.
I want to search in multiple columns in the database but showing only one column in the autocomplete control.

/Mattias

[Mattias]

Hi again,
I tried the workaround above but it's not working as it should.
I'm just able to make one search. If I try another search phrase nothing happens and I need to reload the whole page to be able to search again.

/Mattias

[Georgi Krustev]

Hello Mattias,

 
In order to achieve your goal, you will need to turn off the cache like so:

.DataBinding(binding => binding.Ajax().Select("_AutoCompleteAjaxLoading", "ComboBox").Cache(false))

Also you will need to bind autocomplete everytime on filter:

function autocompleteLoad(e){
         var autocomplete = $(this).data('tAutoComplete');

         autocomplete.filter = 0;
         autocomplete.filters[0] = function(component) {
            component.dataBind(component.data, true /*if you need to preserve input content*/);
         }
    }

Regards,
Georgi Krustev
the Telerik team