JQuery自动完成UI搜索开始时

前端之家收集整理的这篇文章主要介绍了JQuery自动完成UI搜索开始时前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用 JQuery AutoComplete UI,1.8,我需要更改搜索,使其仅匹配字符串的开头.
背景我的来源来自一个我无法控制的ajax调用返回15,000及其相应的PK. value是名称,Id是整数PK.下面的代码可以工作,但由于我搜索了15,000个与字符串中任何位置匹配的字符串,因此它太慢了.
我已经看过这个帖子,链接,但我无法弄清楚怎么做而不会丢失源中的Id字段.

我需要搜索只匹配data.d中的值的开头而不会丢失Id字段.
这是一个ASP.Net应用程序,但我认为这不重要.
想法?

$("#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;
              }
          });

解决方法

这是一个可能的解决方案.你们是在正确的轨道上.我使用了一个json字符串作为数据源,我知道我要匹配的文本在item.label字段中.它可能在item.value中:
输入字段:
<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,ui) {
$('#state_id').val(ui.item.id);
$('#abbrev').val(ui.item.abbrev);
}
});

这是一个有效的例子:
http://www.jensbits.com/demos/autocomplete/index3.php

原文链接:https://www.f2er.com/jquery/177025.html

猜你在找的jQuery相关文章