开始时 JQuery 自动完成 UI 搜索答案

【问题标题】：JQuery Autocomplete UI Search At Beginning开始时 JQuery 自动完成 UI 搜索
【发布时间】：2011-08-13 01:54:01
【问题描述】：

使用 JQuery AutoComplete UI ,1.8，我需要更改搜索，使其仅匹配字符串的开头。背景我的来源来自我无法控制的 ajax 调用，它返回 15,000 及其相应的 PK。 value 是名称，Id 是整数 PK。下面的代码有效，但由于我正在搜索与字符串中任何位置匹配的 15,00 个字符串，所以速度太慢了。我已经看过这个帖子，链接，但我不知道该怎么做才能不丢失源中的 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;
              }
          });

【问题讨论】：

链接消失了，stackoverflow.com/q/2382497/714105
你是对的 - 它是一个 ASPNET 应用程序并不重要。 如果不丢失源中的 Id 字段，我不知道该怎么做是什么意思？源可以是函数；您需要用 fn 替换您的源代码，它会扫描 data.d 并找到您想要的内容，然后使用结果集调用 responseFn。例如，您需要提供 source: function(req,responseFn){...} 而不是 source: data.d, 尚不清楚“丢失 id”有什么问题。
也许你的意思是，当它被调用时，你希望 id 在select: fn 中可用，对吗？在这种情况下，您可能还需要修补 _renderMenu 和 _renderItem fns，将 id 插入到每个值的 <li> 元素中 - 可能使用自定义属性。有关如何执行此操作，请参阅stackoverflow.com/questions/2435964/…
如果我在下面更改源代码 1) 它不起作用 2) 我可以使它起作用的唯一方法是只传递名称，这意味着我不会在选择。来源：函数（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); });响应Fn（一）； }
@Cheeso，在您的第二条评论中更正，我需要选择的 ID

标签： jquery search user-interface autocomplete

【解决方案1】：

这是一个可能的解决方案。你们走在正确的轨道上。我使用 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,
select: function(event, ui) {
$('#state_id').val(ui.item.id);
$('#abbrev').val(ui.item.abbrev);
}
});

这是一个工作示例： http://www.jensbits.com/demos/autocomplete/index3.php

【讨论】：

不错！！！此解决方案也适用于普通数组 ["one", "two", "three"] 。您只需从 matcher.test(item.label) 中删除“.label”