JQuery Autocomplete UI Search At Beginning

Question

Using JQuery AutoComplete UI ,1.8, I need to change the search so it matches only at the start of the string. Background my source comes from an ajax call that I don't control that returns 15,000 and their corresponding PKs. value is the name and Id is the integer PK.The code below works but since I'm searching through 15,00 strings that matches any where in the string it is too slow. I've seen this post, link, but I couldn't figure out how to do without losing the Id field in the source.

I need the search to only match the beginning of value in data.d without losing the Id field. This is an ASP.Net app but I don't 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;
              }
          });

link that disappeared, http://stackoverflow.com/q/2382497/714105 — mike, Apr 26 '11 at 13:54
You're right - It doesn't matter that it's an ASPNET app. What do you mean by *I couldn't figure out how to do without losing the Id field in the source*? The source can be a function; you need to replace your source with a fn, which scans through the `data.d` and finds what you want, then invokes the `responseFn` with the result set. Eg, instead of `source: data.d,` you need to supply `source: function(req,responseFn){...}` It's not clear what problem you're having with "losing the id". — Cheeso, Apr 26 '11 at 14:02
Maybe what you mean is, you want the id to be available in the `select:` fn when it gets invoked, is that right? In that case you may also want to patch the `_renderMenu` and `_renderItem` fns, to insert the id into the `
if i change source this this below 1) it doesn't work 2) the only way I could make it work was to only pass in the names which meant I wouldn't have the Id in the select. source: function(req, responseFn) { var re = $.ui.autocomplete.escapeRegex(req.term); var matcher = new RegExp( "^" + re, "i" ); var a = $.grep( data.d, function(item,index){ return matcher.test(item); }); responseFn( a ); } — mike, Apr 26 '11 at 14:08
@Cheeso, correct on your 2nd comment, I need the Id for the select — mike, Apr 26 '11 at 14:09
I was also looking at the search event but I couldn't tell which methods applied to ui, so I can't tell what's in there. — mike, Apr 26 '11 at 14:15

score 15 · Accepted Answer · answered Apr 26 '11 at 17:36

Here is a possible solution for you. You guys were on the right track. I used a json string as the datasource and I know the text I want to match is in the item.label field. It might 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

nice!!! This solution also works with a plain array ["one", "two", "three"] . You only have to remove the '.label' from matcher.test(item.label) — shock_gone_wild, Mar 05 '15 at 08:04

JQuery Autocomplete UI Search At Beginning

1 Answers1

Linked