CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-ui-autocomplete
MikeS
MikeS

Reputation: 247

jQuery autocomplete pre-filtered results - show all

I have an ajax function which searches a database of users. All usernames get put into an array like

var usernames = ["Mike Scott", "Mike Whosname", "Mike Johns", "Mike Nicolas"];

So simply, I want the autocomplete to just display whatever is in this array. Either that or turn the search off completely so it doesn't filter my results for a second time.

The reason for this is, my SQL code also searches userid's so if I type for example "mscott", my servlet returns "Mike Scott" which gets put into the usernames array.

I want them to be able to select "Mike Scott" if they input "mscott".

The autocomplete is trying to search my array for "mscott" which is not displaying any results so I want it to just simply display everything in my array.

Is this possible?

Thanks.

Current code:

$('#userInput').autocomplete({source: usernames, search: "", minLength: 0}).keyup(function(){

var url = "/AJAX/SearchUsers.do?searchQ=mscott";
        $.ajax(url, {
          type: "GET",
          datatype: "json",
          success: function(data) {
            for (var i =0; i < data.length; i++) {
              usernames.push(data[i].username);
          }
        }
      });
    $(this).autocomplete("option", {source: usernames, search: "", minLength: 0});

  });

Upvotes: 1

Views: 1863

Answers (2)

MikeS
MikeS

Reputation: 247

I solved my problem and it was a small issue I simply overlooked but still worth answering my own question just case someone else hasn't considered this before.

My problem was because my results are pre filtered, I was resetting the usernames array on key up to display a brand new set of results.

However, the following code: usernames = []; is not a good way of resetting the current array as the variable is redeclared and the reference to the original array (That autocomplete uses) is lost. So my console was showing my usernames array with new values but Autocomplete wasn't showing any new values at all.

Thankyou to @Twisty for offering help even though I didn't supply some of the code I was using. His fiddle helped me clear a lot of stuff up.

I ended up clearing the array by using:

usernames.length = 0;

New code:

$('#userInput').autocomplete({
    source: usernames,
    search: "",
    minLength: 0
  }).keyup(function(){
  var inputField = $(this);
  var site = $('#site').val();
  var url = "/AJAX/SearchUsers.do?searchQ="+inputField.val()+"&site="+site;

  if (inputField.val().length > 3){
    $.ajax(url, {
      type: "GET",
      datatype: "json",
      success: function(data) {
        taggedData = data;
        for (var i =0; i < data.length; i++) {
          usernames.push(data[i].username);
      }
    }
  });
}
  $(this).autocomplete("search", "");
  usernames.length = 0;
});

Upvotes: 1

Twisty
Twisty

Reputation: 30893

From the jQuery UI API:

search( [value ] )

Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.

This could be executed like so:

$('#userInput').focus(function(){
  $(this).autocomplete( "search", "" );
});

To answer your question, yes, there is a way. See more: http://api.jqueryui.com/autocomplete/#method-search

Example Code: https://jsfiddle.net/4muo4pf0/

Upvotes: 1

Related Questions