CODEWITHSUNDEEP
javascriptjqueryajaxjquery-uijquery-ui-autocomplete
ryuzakixd
ryuzakixd

Reputation: 3

Always show autocomplete list, even if search doesn't match

I have an autocomplete field, and on type I go to the PHP/Database to retrieve the matching options.

Thing is, my suggestion list isn't exactly matches of the text. I explain:

Say I type "Jon". My list will bring from the database "John Doe", "Jonatan", etc. Only "Jonatan" will be visible as the suggestion to the input, but I do need them all, because it considers approximation (there's a soundex element on my backend search).

My JavaScript/Ajax code:

function prePatientsList(){
      //I'm limiting search so it only starts on the second character
    	if (document.getElementById("name").value.length >= 2) { 

            try
            {
            	listExecute.abort();
        	}catch(err) {
        	   null;
        	}
            var nome= $("#name").val();
            var nomeList = "";
            listExecute = $.ajax({
                    url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
                    type: "POST",
                    async: true,
                    datatype: 'json',
                    data: { nome: nome}
             }).done(function(data){
            	 source = JSON.parse(data);
             });
            
            
            $(function() {
            	$("input#nome").autocomplete({
                    source: source,
                    // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
                    select: function( event, ui ) {                    	
                        ui.item.label;
                    }
                });
            });
    	}     

    }

Thanks.

Upvotes: 0

Views: 1172

Answers (1)

ADyson
ADyson

Reputation: 61914

I think you'd have to set your remote endpoint directly as the autocomplete's source (e.g. similar to https://jqueryui.com/autocomplete/#remote) so that it's the backend which does all the filtering. Right now, the autocomplete effectively thinks you've fed it a static list of options from which further filtering should take place, and therefore it decides to handle the filtering itself.

Your code can be as simple as this I think, no need to have a separate handler or an ajax request outside the scope of the autocomplete.

$(function() {
  $("input#nome").autocomplete({
    minLength: 2, //limit to only firing when 2 characters or more are typed
    source: function(request, response) 
    {
      $.ajax({
        url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
        type: "POST",
        dataType: 'json',
        data: { nome: request.term } //request.term represents the value typed by the user, as detected by the autocomplete plugin
     }).done(function(data){
         response(data); //return the data to the autocomplete as the final list of suggestions
     });
    },
    // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
    select: function( event, ui ) {                     
      ui.item.label;
    }
  });
});

See http://api.jqueryui.com/autocomplete/#option-source for more info.

Upvotes: 2

Related Questions