JQuery Autocomplete UI at the beginning

Question

Using JQuery AutoComplete UI, 1.8, I need to modify the search so that it matches only the beginning of the line. The background of my source comes from an ajax call that I do not control, which returns 15,000 and their respective PCs. value is the name, and Id is the integer PK. The code is below, but since I'm looking for lines of 15.00 that match any where in the line it is too slow. I saw this post, the link, but I could not figure out how to do this without losing the Identifier field in the source.

I need the search to match the start of the value in data.d without losing the Id field. This is an ASP.Net application, but I do not think it matters. Ideas?

$("#companyList").autocomplete({ minLength: 4, source: data.d, focus: function(event, ui) { $('#companyList').val(ui.item.value); return false; }, select: function(event, ui) { $('#companyList').val(ui.item.value); $('#<%= hdnCompanyListSelectedValue.ClientID %>').val(ui.item.Id); return false; } }); 

Answer 1

Here is a possible solution for you. You guys were on the right track. I used the json string as the data source, and I know that the text I want to map is in the item.label field. This may be in item.value for you: Input fields:

 <input type="text" id="state" name="state" /> <input readonly="readonly" type="text" id="abbrev" name="abbrev" maxlength="2" size="2"/> <input type="hidden" id="state_id" name="state_id" /> 

JQuery

 var states = [{"id":"1","label":"Armed Forces Americas (except Canada)","abbrev":"AA"},{"id":"2","label":"Armed Forces Africa, Canada, Europe, Middle East","abbrev":"AE"},{"id":"5","label":"Armed Forces Pacific","abbrev":"AP"},{"id":"9","label":"California","abbrev":"CA"},{"id":"10","label":"Colorado","abbrev":"CO"},{"id":"14","label":"Florida","abbrev":"FL"},{"id":"16","label":"Georgia","abbrev":"GA"},{"id":"33","label":"Northern Mariana Islands","abbrev":"MP"},{"id":"36","label":"North Carolina","abbrev":"NC"},{"id":"37","label":"North Dakota","abbrev":"ND"},{"id":"43","label":"New York","abbrev":"NY"},{"id":"46","label":"Oregon","abbrev":"OR"}]; $("#state").autocomplete({ source: function(req, response) { var re = $.ui.autocomplete.escapeRegex(req.term); var matcher = new RegExp( "^" + re, "i" ); response($.grep( states, function(item){ return matcher.test(item.label); }) ); }, minLength: 2, select: function(event, ui) { $('#state_id').val(ui.item.id); $('#abbrev').val(ui.item.abbrev); } }); 

And here is a working example: http://www.jensbits.com/demos/autocomplete/index3.php