jQuery自动完成筛选问题

Question

这是我的代码。我试图只在用户输入"时进行搜索；符号。但是用户也可以输入正常的单词，比如hello。

示例：你好-无需自动完成。[你好]-需要自动完成。

这是jsfiddle样品

function split(val) {
return val.split(/,s*/);
}
function extractLast(term) {
return split(term).pop();
}
var availableTags = [
"[Hello]",
"[Hello World]",
"[Google",
"[New Life]",
"[World]",
"[Old]"
];
$("#tags").autocomplete({
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("  ");
return false;
}
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" jq=""></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="ui-widget">
<label for="tags">Search: </label>
<input type="text" id="tags" onkeypress="edValueKeyPress()" />
</div>

Answer 1

您可以更新sourcecallback以使用response，如下所示。获取lastTerm并检查它是否以[开始，然后只返回过滤后的结果，否则返回空，这将不会在自动完成中显示任何结果。

根据注释，它不适用于自动完成的第二个选择，您需要添加focuscallback，它将类似于select，只是没有一行terms.push("");。

source: function(request, response) {
let lastTerm = extractLast(request.term);
if (lastTerm.trim().startsWith('[')) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(availableTags, lastTerm));
} else {
response([]);
}
},
focus: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value); 
// terms.push(""); <-- comment this line from select   
this.value = terms.join(", ");
return false;
}

请在下面试试。

function split(val) {
return val.split(/,s*/);
}
function extractLast(term) {
return split(term).pop();
}
var availableTags = [
"[Hello]",
"[Hello World]",
"[Google",
"[New Life]",
"[World]",
"[Old]"
];
$("#tags").autocomplete({
source: function(request, response) {
let lastTerm = extractLast(request.term);
if (lastTerm.trim().startsWith('[')) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(availableTags, lastTerm));
} else {
response([]);
}
},
focus: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// terms.push(""); <-- comment this line from select
this.value = terms.join(", ");
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
function edValueKeyPress() {}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" jq=""></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="ui-widget">
<label for="tags">Search: </label>
<input type="text" id="tags" onkeypress="edValueKeyPress()" />
</div>