嘿伙计们需要一些帮助。我想知道我是否可以添加一个函数来匹配从左到右的字母,而不是将任何单词带到我当前的代码。例如,如果我搜索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>
&#13;
答案 0 :(得分:1)
一种方法是覆盖默认功能;
// 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);
});
};
这是这项工作的小提琴:
答案 1 :(得分:0)
正如我评论的那样,你可以使用Function for source。
工作示例:https://jsfiddle.net/Twisty/5gm0tmLh/
<强>的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:
功能:第三种变体(回调)提供了最大的灵活性,可用于将任何数据源连接到自动填充。回调有两个参数:
一个
request
对象,具有单个term
属性,该属性引用文本输入中当前的值。例如,如果用户在城市字段中输入"new yo"
,则自动填充字词将等于"new yo"
。一个
response
回调,它需要一个参数:向用户建议的数据。应根据提供的术语过滤此数据,并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理请求期间的错误时,这很重要。即使遇到错误,也必须始终调用response
回调。这可确保窗口小部件始终具有正确的状态。在本地过滤数据时,您可以使用内置的
$.ui.autocomplete.escapeRegex
功能。它将采用单个字符串参数并转义所有正则表达式字符,从而使结果安全地传递给new RegExp()
。
希望有所帮助。
答案 2 :(得分:0)
这是一个解决方案,适应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>