Jquery ui Jquery UI自动完成匹配键入的第一个字母

嘿，伙计们，需要帮助。我想知道我是否可以添加一个函数，只匹配从左到右的字母，而不是将任何带有该字母的单词带到我的当前代码中。例如，如果我搜索一个列表，我的列表中包含苹果和香蕉，那么应该只显示苹果。我知道已经有人问过这个问题，但我正在寻找与我当前的代码兼容的东西

$（文档）.ready（函数（）{
$（“input.autocomplete”）.autocomplete({
最小长度：1，
资料来源：[{
值：“设备搜索”，
url:“”
}
],
选择：功能（事件、用户界面）{
打开（ui.item.url）；
}
});
});

搜寻
一种方法是覆盖默认功能

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

这是一把小提琴：

正如我所评论的，您可以使用源代码的函数来实现这一点

工作示例：

JavaScript

var mySource = [{
  value: "Equipment Search",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search Dev",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search QA",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "FCSF",
  url: 'http://domainb.com/aspnet35/POSLogin/Login.aspx?AppName=Console&ConsoleApp=CSF'
}, {
  value: "Hitch Matrix",
  url: 'https://domainc.com/secure/aspnet4/hitchmatrix/manage_hitches.aspx'
}, {
  value: "Kiosk Dev",
  url: 'http://domainc.com/aspnet3/kioskadmin/'
}, {
  value: "Kiosk",
  url: 'https://domaina.com/secure/kioskadmin/'
}, {
  value: "MOAS",
  url: 'https://domaina.com/tools/inventory_control/login_main.aspx?ReturnUrl=%2ftools%2finventory_control%2fOrderApproval.aspx%20'
}, {
  value: "POS Admin",
  url: 'https://domainb.com/POSAdmin'
}, {
  value: "QA Tool Dev",
  url: 'http://domainc.com/aspnet4/NewQAAdmin/login.aspx'
}, {
  value: "QA Tool",
  url: 'https://domaina.com/QAAdmin/login.aspx'
}, {
  value: "RT Admin Tool",
  url: 'https://domaina.com/secure/rta/login/adminlogin'
}, {
  value: "Uchat Dev",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uchat",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uscan Service Logger (Dev)",
  url: 'http://mdomainc.com/aspnet4/ServiceLogger/'
}, {
  value: "Uscan Service Logger",
  url: 'https://domainc.com/secure/aspnet4/ServiceLogger'
}, {
  value: "VIP Look Up",
  url: 'https://domaina.com/tools/certificate/default.aspx'
}, ];

$(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(req, resp) {
      var q = req.term;
      var myResponse = [];
      $.each(mySource, function(key, item) {
        if (item.value.toLowerCase().indexOf(q) === 0) {
          myResponse.push(item);
        }
      });
      resp(myResponse);
    },
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});

从API：

函数：第三种变体是回调，它提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调函数获取两个参数：


一个
请求
对象，具有一个
术语
属性，该属性引用文本输入中当前的值。例如，如果用户在城市字段中输入
“new yo”
，则自动完成术语将等于
“new yo”


一个
响应
回调，它需要一个参数：向用户建议的数据。该数据应根据提供的术语进行过滤，并且可以采用上述任何格式，用于简单的本地数据。当提供自定义源回调来处理请求期间的错误时，这一点很重要。即使遇到错误，也必须始终调用
响应
回调。这确保小部件始终具有正确的状态



在本地筛选数据时，可以使用内置的
$.ui.autocomplete.escapeRegex
函数。它将接受一个字符串参数并转义所有正则表达式字符，从而使结果可以安全地传递到
newregexp（）

希望这会有所帮助。
这里有一个解决方案，它改编了中的一个示例（使用自定义源回调只匹配术语的开头）


$（文档）.ready（函数（）{
风险值数据=[{
值：“设备搜索”，
url:“”
},
{
值：“设备搜索开发”，
url:“”
},
{
值：“设备搜索QA”，
url:“”
},
{
价值：“FCSF”，
url:“”
},
{
值：“挂接矩阵”，
url:“”
},
{
值：“Kiosk Dev”，
url:“”
},
{
值：“信息亭”，
url:“”
},
{
价值：“MOAS”，
url:“”
},
{
值：“POS管理员”，
url:“”
},
{
值：“QA工具开发”，
url:“”
},
{
值：“QA工具”，
url:“”
},
{
值：“RT管理工具”，
url:“”
},
{
值：“Uchat Dev”，
url:“”
},
{
值：“Uchat”，
url:“”
},
{
值：“Uscan服务记录器（开发）”，
url:“”
},
{
值：“Uscan服务记录器”，
url:“”
},
{
值：“VIP查找”，
url:“”
},
];
$（“input.autocomplete”）.autocomplete({
最小长度：1，
来源：功能（请求、响应）{
var matcher=newregexp（“^”+$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（$.grep（数据、功能（项目））{
返回匹配器测试（项值）；
}));
},
选择：功能（事件、用户界面）{
打开（ui.item.url）；
}
});
});

搜寻
如果只想匹配第一个字母，则需要为
源代码：函数（请求、响应）{}
构建自己的过滤器。将发布答案。相关问题：应该注意，这将覆盖页面上所有自动完成的过滤器。所以如果只有1个，这就太棒了！如果有2个，并且每个都需要不同的过滤器类型，这会导致问题。谢谢@Twisty，这很有效！我真的很感谢你的帮助@MarkWhite如果你想修改URL，最好发表评论并让我知道。然后我可以将它们调整为其他值。这篇文章仍然应该显示出一些价值；这样，它可以帮助其他人，可能会发现这个问题。很抱歉，但我需要的URL的被删除尽快。我忘了这篇文章，上面的URL应该从未发布过。@MarkWhite被删除。@MarkWhite我还注意到你从未将其中一个标记为答案。我希望其中一个答案对您有所帮助，并将其标记为答案。