jQuery - autocomplete plugin

Question

I'm using this one:

https://github.com/agarzola/jQueryAutocompletePlugin

The only problem is that when you type the 1st character in the input field, it will display all term suggestions, including terms which don't contain this character.

And only after you type the 2nd character it will behave normally, displaying tag suggestions containing only those 2 characters.

I'm using this configuration:

$('input.autocomplete').autocomplete("localhost/boo/?get_suggestions=1", {
   width: 250,
   max: 100,
   matchContains: true,
   minChars: 1,
   selectFirst: true,
   cache: false,
   multiple: true,
   multipleSeparator: " "
 });

Does anyone know a workaround for this?

alt text

Also when I type a random string, which I know it's not in the list, for eg. *&@FGBHFHBOFUBF*UB# it will display the entire list again :(

The back-end:

if($_GET['get_suggestions']):
  $terms = get_all_terms();
  foreach ($terms as $term) echo $term['title']."\n";
  die();
endif;

try posting "get_all_terms()". why are you hestitating to post the code? Also, when you type something in, open up the developer tools (inspect element in chrome, or install the firebug ext in firefox) and watch the xmlhttp requests (in chrome, click the console icon and right click, select log xmlhttp requests). See if it is submitting the "a" when you type "a" and the "ac" when you type "ac". As mentioned below it could be only submitting the "a" in "ac" and nothing in "a" — Jason, Jan 10 '11 at 10:11
source: function(request, response) { var filteredArray = $.map(orignalArray, function(item) { if( item.value.startsWith(request.term)){ return item; } else{ return null; } }); response(filteredArray); }, http://stackoverflow.com/questions/3148195/jquery-ui-autocomplete-use-startswith — Kuttan Sujith, Jun 04 '12 at 12:28

score 1 · Answer 1 · answered Jan 10 '11 at 03:33

1

I would suggest disabling first character suggestions altogether, and start on the second or even third character. Most people including myself find it annoying to instantly get spammed with suggestions after typing a "b".

answered Jan 10 '11 at 03:33

orlp

112,504
36
218
315

if I do that, then the same happens (after `minChars` characters). So if I change to 3, it would only behave normally when I input at least 4 characters... But thanks for the suggestion, I'll do that if I could get it working :) – Alex Jan 10 '11 at 03:36
Ohh, but who said I was talking about minChars ghe ghe ghe :) You might get hacky and hide the suggestions until your personal minChars is reached. But first you should try to find out the problem. **EDIT** A few things I noted, ain't the problem in localhost/boo/. And reading the github page on AutoComplete plugin it says "Jörn Zaefferer’s (now deprecated) jQuery plugin". Might be interesting. – orlp Jan 10 '11 at 03:39
yes, the plugin on github is a port of a deprecated plugin (the one from bassistance.de which is now integrated in jquery UI). – Alex Jan 10 '11 at 03:44

score 1 · Answer 2 · answered Jan 10 '11 at 03:37

1

Change your minchars to 2

 minChars: 2

That will make it so it only suggests things from the 2 character.

or try turning off multiple.

multiple: false

Do you need that to be enabled?

If that's not your cup of tea, post the code for localhost/boo/?get_suggestions=1 and we will take a look see :)

answered Jan 10 '11 at 03:37

Jason

15,064
15
65
105

Like I said above, the bug persists but this time it's on the 2nd character :) The code for `localhost/boo/?get_suggestions=1` looks ok, it just echoes a list of terms on each line... – Alex Jan 10 '11 at 03:39

score 1 · Answer 3 · answered Jan 10 '11 at 04:07

That autocomplete code is wrong at some part. From the image you posted, when you typed a a long list of all terms showed; when you typed ac the list of suggestions matched a instead of ac.

What does it mean? the code takes the input value before the new character is taken into account. You may take a dive into the plugin code, or use a new plugin.

score 1 · Accepted Answer · answered Jan 10 '11 at 15:08

1

I’m the one maintaining that github repo. Here’s what’s going on:

In the case of using a url for the data, the script sends the request as whatever you set in the specified url, and adds q=[current input value] at the end. In the case of initial load when you type in “a”, this is sent to your backend script: localhost/boo/?get_suggestions=1&q=a. Thus, autocompelte.js expects this initial query to produce only items that match the query. After that initial request, the script will take on the filtering subsets internally, to decrease server load. This explains why “ac” returns only items that match your criteria. This is the autocomplete script doing its job of filtering what the server gave it.

If I’m interpreting your backend code correctly, it makes no use whatsoever of the q parameter being sent in the request, so your code is returning every possible term. Autocomplete presumes this is the result of a proper search and shows you all of it, waiting for more characters to be typed in for it to filter the list further.

The point being that you need to make your backend script filter the list of terms to whatever matches the q parameter before returning it to the autocomplete script.

Let me know if I can be of further assistance!

answered Jan 10 '11 at 15:08

Alfonso

2,166
3
16
15

thank you, I understand now :P But doesn't this make the script query the server a little too much? – Alex Jan 10 '11 at 15:47
1

It should only query the server each time that the minimum number of characters is entered (in this case, one character). But remember that once that first query is made, the rest of the characters for that term will filter at the JS level. In fact, the way you have it set up right now is that: just one query is made on first load (when you type “a”), and the rest is done locally (JS/browser, when you type “c”). – Alfonso Jan 10 '11 at 16:14
thank you :) may I ask if it's possible to change the layout of the suggestion box to include other data as well - like examples 2, 3 here: http://tomcoote.co.uk/wp-content/CodeBank/Demos/JSONSuggestBox/demo.html – Alex Jan 10 '11 at 22:36
1

Yes, it’s possible. Look at the original script’s options here: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions. Under the “Options” tab, look for formatItem. You can load a function into that parameter which the script will run for each item in the results list. You can write a function that grabs the additional data you require per each item and lay it out however you wish. – Alfonso Jan 11 '11 at 00:01

jQuery - autocomplete plugin

4 Answers4