JQuery UI Autocomplete widget search configuration

Question

I am trying to use the jQuery UI auto -completion widget to implement a search for users by first or last name. It seems that by default, autocomplete searches for words by a sequence of characters, regardless of their occurrence in the word. Therefore, if you have data such as: javascript, asp, haskell and you javascript, asp, haskell 'as' you will get all three. I would like this to match only the beginning of the word. So in the above example, you only get 'asp' . Is there a way to customize an autocomplete widget for this?

Ultimately, it would be even better to match by first or last name, as in Gmail.

Note: I am trying to find a way to do this using the jQuery UI widget. Since my project already uses the jQuery user interface, I plan to stick with it and not add additional libraries to my web application.

Answer 1

In jQuery UI v1.8rc3, the autocomplete widget accepts source , which can be either a string, an array, or a callback function. If it is a string, autocomplete does a GET at that url to get options / suggestions. If an array, autocomplete searches, as you indicated, for typed characters at any position in terms of the array. The final option is what you want - a callback function.

From the autocomplete documentation:

The third option, callback, provides maximum flexibility and can be used to connect any data source to autocomplete. The callback receives two arguments:

• The request object with a single property called "term" that refers to the value that is currently present in the text input. For example, when a user entered “new years” in a city field that is configured to perform autocomplete, request.term will hold the “new year”.
• The response function, a callback that expects one argument to contain the data offered to the user. This data should be filtered based on the provided term and should be an array in the format allowed for simple local data: String-Array or Object-Array with label / value / both properties.

Code example:

 var wordlist= [ "about", "above", "across", "after", "against", "along", "among", "around", "at", "before", "behind", "below", "beneath", "beside", "between", "beyond", "but", "by", "despite", "down", "during", "except", "for", "from", "in", "inside", "into", "like", "near", "of", "off", "on", "onto", "out", "outside", "over", "past", "since", "through", "throughout", "till", "to", "toward", "under", "underneath", "until", "up", "upon", "with", "within", "without"] ; $("#input1").autocomplete({ // The source option can be an array of terms. In this case, if // the typed characters appear in any position in a term, then the // term is included in the autocomplete list. // The source option can also be a function that performs the search, // and calls a response function with the matched entries. source: function(req, responseFn) { var re = $.ui.autocomplete.escapeRegex(req.term); var matcher = new RegExp( "^" + re, "i" ); var a = $.grep( wordlist, function(item,index){ return matcher.test(item); }); responseFn( a ); } }); 

A few key points:

• call $.ui.autocomplete.escapeRegex(req.term); , which speeds up the search so that any regular expressions contained in the text entered by the user are treated as plain text. For example, a period (.) Makes sense for a regular expression. I found out about this escapeRegex function by reading the autocomplete source code.
• line with new Regexp() . It specifies a regular expression starting with ^ (Circumflex), which implies that it will only match when typed characters appear at the beginning of the member in the array that you wanted. It also uses the "i" option, which implies case insensitivity.
• the $.grep() utility simply calls the provided function for each term in the provided array. The function in this case simply uses regexp to see if the member in the array matches what was printed.
• finally, responseFn () is called with the search result.

working demo: http://jsbin.com/ezifi

what it looks like:

Just a note: I believe that the autocomplete documentation will be pretty immature at the moment. I did not find examples that did this, and I could not find a working document that needed .css files or which .css classes would be used. I learned all this from code verification.

See also how can I configure Autocomplete plug-in settings?

Answer 2

I use autocomplete from Devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Matches only leading characters.

As for matching based on first or last name, you just need to provide a search list with first and last name.

Usage example:

  var wordlist = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var acOptions = { minChars:2, delimiter: /(,|;)\s*/, // regex or character maxHeight:400, width:300, zIndex: 9999, deferRequestBy: 10, // miliseconds // callback function: onSelect: function(value, data){ //$('#input1').autocomplete(acOptions); if (typeof data == "undefined") { alert('You selected: ' + value ); }else { alert('You selected: ' + value + ', ' + data); } }, // local autosuggest options: lookup: wordlist }; 

The lookup option that you pass to initialize the autocomplete control can be a list or an object. Above is a simple list. If you want some data to be returned to sentences, then make the lookup option an object, for example like this:

 var lookuplist = { suggestions: [ "Jan", "Feb", "Mar", "Apr", "May" ], data : [ 31, 28, 31, 30, 31, ] }; 

Answer 3

thanks cheeso for creating jsbin.com,

i expanded your code to support matches with the first and last.

  $("#input1").autocomplete({ source: function(req, responseFn) { addMessage("search on: '" + req.term + "'<br/>"); var matches = new Array(); var needle = req.term.toLowerCase(); var len = wordlist.length; for(i = 0; i < len; ++i) { var haystack = wordlist[i].toLowerCase(); if(haystack.indexOf(needle) == 0 || haystack.indexOf(" " + needle) != -1) { matches.push(wordlist[i]); } } addMessage("Result: " + matches.length + " items<br/>"); responseFn( matches ); } }); 

demo: http://jsbin.com/ufimu3/

type 'an' or 're'

Answer 4

If you want to find the beginning of each word in a string, a more elegant solution for a hanchman is to use cheeso, but just use the special regular border word character:

 var matcher = new RegExp( "\\b" + re, "i" ); 

Example: http://jsbin.com/utojoh/2 (try searching for 'bl')

Answer 5

Theres another jQuery autocomplete plug-in that optionally searches only at the beginning of each element ( matchContains=false option, I think this is also the default value).

Given the lack of such an option in the jQuery UI plugin, I assume that you have to either use another plugin or rewrite the one you are using now.

Answer 6

Where do you get autofill data? Is it from the database? If so, you can do what you want in your query and return results matching the start of each word (first / last name)