且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JQuery的自动完成用户界面中搜索在起点

更新时间:2023-09-18 20:05:10

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

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

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

这里是一个工作的例子:
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