I'm looking into using the jQuery UI autocomplete widget to implement user lookup by first or last name. It looks like by default autocomplete looks up words by character sequence no matter its occurrence in a word. So if you have data such as: javascript, asp, haskell
and you type in 'as'
you will get all three. I would like it to only match beginning of the word. So in above example you get only 'asp'
. Is there a way to configure the autocomplete widget to do this?
Ultimately it would be even better to match by beginning of first or last name like it is in Gmail.
Note: I'm trying to figure out a way to do this using the jQuery UI widget specifically. Since I'm already using jQuery UI in my project, I'm planning to stick with it and try not adding additional libraries to my web application.
Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })
The AutoComplete control supports strongly-typed HTML helpers represented by lambda expressions that have model or template passed into the View. So, you can get the selected value from view in the Controller part. To achieve this, create an AutocompleteFor control and bound the dataSource from controller part.
I use the autocomplete from devbridge. http://www.devbridge.com/projects/autocomplete/jquery/
It matches on the beginning characters, only.
As far as matching based on first name or last name, you'd just have to supply a lookup list with the first and last name.
Example usage:
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. The above showed a simple list. If you want some data attached to the suggestions that get returned, then make the lookup
option an object, like this:
var lookuplist = {
suggestions: [ "Jan", "Feb", "Mar", "Apr", "May" ],
data : [ 31, 28, 31, 30, 31, ]
};
thx cheeso for intrducing jsbin.com,
i extended your code to support first- and lastname matches, too.
$("#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'
If you want to search the beginning of each word in the string, a more elegant solution to henchman's is to take cheeso's but just use the regexp word boundary special character:
var matcher = new RegExp( "\\b" + re, "i" );
Example: http://jsbin.com/utojoh/2 (try searching for 'bl')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With