JQuery的自动完成用户界面中搜索在起点 [英] JQuery Autocomplete UI Search At Beginning

问题描述

使用jQuery UI自动完成，1.8，我需要改变搜索，因此只在字符串的开始匹配。
背景我的源来自一个Ajax调用，我没有控制它返回15,000及其相应的PK。值的名称和ID低于工程整数PK.The code，但因为我通过15,00字符串任何地方字符串中匹配搜索实在是太慢了。
我已经看到了这个帖子，链接，但我无法弄清楚如何在不源失去了Id字段做。

我需要的搜索只在data.d匹配值的开头不失Id字段。
这是一个ASP.Net应用程序，但我不认为它很重要。
想法？

  $（＃companyList）。自动完成（{
              的minLength：4，
              来源：data.d，
              重点：函数（事件，UI）{
                  $（'＃companyList）VAL（ui.item.value）。
                  返回false;
              }，
              选择：函数（事件，UI）{
                  $（'＃companyList）VAL（ui.item.value）。
                  $（'＃＆下;％= hdnCompanyListSelectedValue.ClientID％GT;'）。VAL（ui.item.Id）;
                  返回false;
              }
          }）;
 

解决方案

下面是你一个可能的解决方案。你们是在正确的轨道上。我用一个JSON字符串作为数据源，我知道我要匹配的文本是在item.label领域。这可能是在item.value为您提供：
输入字段：

 ＆LT;输入类型=文本ID =状态NAME =状态/＆GT;
＆LT;输入
只读=只读类型=文本ID =缩写NAME =缩写MAXLENGTH =2
大小=2/＆GT;
＆LT;输入类型=隐藏ID =STATE_IDNAME =STATE_ID/＆GT;
 

jQuery的

  VAR状态= [{ID：1，标签：武装部队美洲（除加拿大），缩写：AA}，{ ID：2，标签：三军非洲，加拿大，欧洲，中东，缩写：AE}，{ID：5，标签：三军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马里亚纳群岛，缩写：MP}，{ID：36，标签：北卡罗莱纳，缩写：NC}，{ID：37，标签：北达科他州，缩写：ND}，{ID：43，标签：纽约，缩写：NY}，{ID： 46，标签：俄勒冈州，缩写：或}];$（＃状态）。自动完成（{
    来源：功能（REQ，响应）{
    VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
    VAR匹配=新的RegExp（^+重，我）;
    响应（$。grep的（状态，功能（项目）{
        返回matcher.test（item.label）; }））;
     }，
的minLength：2，
选择：函数（事件，UI）{
$（'＃STATE_ID）VAL（ui.item.id）。
$（'＃缩写）VAL（ui.item.abbrev）。
}
}）;
 

这里是一个工作的例子：
<一href=\"http://www.jensbits.com/demos/autocomplete/index3.php\">http://www.jensbits.com/demos/autocomplete/index3.php

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;
              }
          });

解决方案

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

这篇关于JQuery的自动完成用户界面中搜索在起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！