Jquery UI自动完成匹配首字母输入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery UI自动完成匹配首字母输入相关的知识，希望对你有一定的参考价值。
嘿伙计们需要一些帮助。我想知道我是否可以添加一个函数来匹配从左到右的字母，而不是将任何单词带到我当前的代码。例如，如果我搜索A并且我的列表中包含Apple和Banana，那么Apple应该会出现。我知道这已经被问过，但是寻找适合我当前代码的东西。
$(document).ready(function() {
$("input.autocomplete").autocomplete({
minLength: 1,
source: [{
value: "Equipment Search",
url: ''
}
],
select: function(event, ui) {
window.open(ui.item.url);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input-group">
<input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
<span class="input-group-btn">
<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
</span>
</div>答案
一种方法是覆盖默认功能;
// 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);
});
};
这是这个工作的小提琴：
http://jsfiddle.net/yLdn3/324/
另一答案
这是一个解决方案，适用于https://api.jqueryui.com/autocomplete/#entry-examples中的一个示例（使用自定义源回调仅匹配术语的开头）
$(document).ready(function() {
var data = [{
value: "Equipment Search",
url: ''
},
{
value: "Equipment Search Dev",
url: ''
},
{
value: "Equipment Search QA",
url: ''
},
{
value: "FCSF",
url: ''
},
{
value: "Hitch Matrix",
url: ''
},
{
value: "Kiosk Dev",
url: ''
},
{
value: "Kiosk",
url: ''
},
{
value: "MOAS",
url: ''
},
{
value: "POS Admin",
url: ''
},
{
value: "QA Tool Dev",
url: ''
},
{
value: "QA Tool",
url: ''
},
{
value: "RT Admin Tool",
url: ''
},
{
value: "Uchat Dev",
url: ''
},
{
value: "Uchat",
url: ''
},
{
value: "Uscan Service Logger (Dev)",
url: ''
},
{
value: "Uscan Service Logger",
url: ''
},
{
value: "VIP Look Up",
url: ''
},
];
$("input.autocomplete").autocomplete({
minLength: 1,
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function(item) {
return matcher.test(item.value);
}));
},
select: function(event, ui) {
window.open(ui.item.url);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input-group">
<input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
<span class="input-group-btn">
<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
</span>
</div>另一答案
正如我评论的那样，你可以使用Function for source来做到这一点。
工作示例：https://jsfiddle.net/Twisty/5gm0tmLh/
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：
功能：第三种变体，即回调，提供最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：
request对象，具有单个term属性，指的是当前文本输入中的值。例如，如果用户在城市字段中输入"new yo"，则自动完成术语将等于"new yo"。- 一个
response回调，它需要一个参数：向用户建议的数据。应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理请求期间的错误时，这很重要。即使遇到错误，也必须始终调用response回调。这可确保窗口小部件始终具有正确的状态。在本地过滤数据时，您可以使用内置的
$.ui.autocomplete.escapeRegex函数。它将采用单个字符串参数并转义所有正则表达式字符，使结果安全传递给new RegExp()。
希望有所帮助。
以上是关于Jquery UI自动完成匹配首字母输入的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery ui 自动完成使匹配的文本变为粗体？
jQuery UI Ajax 自动完成区分大小写 ASP.net MVC