[英]Recursive tag search for Autocomplete - jQuery plugin
I am using the jQuery autocomplete plugin to search for tags in a textarea. 我正在使用jQuery 自动完成插件来搜索文本区域中的标签。
It's work perfectly, but now I need it search again while user is typing in the text box. 它工作正常,但是现在我需要在用户在文本框中键入内容时再次搜索它。
For example, I have: 例如,我有:
var tags = [
{ label: "#schedules", value: "Monday, Wednesday and Friday from 9:00 p.m. to 6:00 p.m." },
{ label: "@address", value: "Some Address, 12345 - Some City" },
];
$("#text_box").autocomplete({
source: function(request, response) {
var matcher = new RegExp(
"^" + $.ui.autocomplete.escapeRegex(request.term), "i"
);
response($.grep(tags, function(item) {
return matcher.test(item.label);
}));
}
});
So if the user write: 因此,如果用户写:
"Hello, tanks for contact us, where be able #schedules you can find us in @address" “您好,请与我们联系的坦克,您可以在@address中找到我们的时间表。”
the plugin must search all the coincidences again and suggest them on the bottom the text box every time. 插件必须再次搜索所有巧合,并每次在文本框底部建议它们。 And the restultant string in the text box must be:
文本框中的恢复字符串必须为:
"Hello, tanks for contact us, where be able Monday, Wednesday and Friday from 9:00 pm to 6:00 pm you can find us in Some Address, 12345 - Some City" “您好,请与我们联系的战车,您可以在周一,周三和周五的9:00 pm至6:00 pm在12345的Some Address-Some City找到我们”
Question: How I can do this? 问题:我该怎么做? Can the plugin do this, or I need to create my own algorithm?
插件可以做到这一点,还是我需要创建自己的算法?
As I mentioned, with some minor changes to the Demo, you can make a quick substitution menu. 如前所述,对演示进行一些细微更改,您可以进行快速替换菜单。
var tags = [{ label: "@schedules", value: "Monday, Wednesday and Friday from 9:00 pm to 6:00 pm" }, { label: "@address", value: "Some Address, 12345 - Some City" }]; $(function() { function split(val) { return val.split(" "); } function extractLast(term) { return split(term).pop(); } $("#text_box").on("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function(request, response) { var q = extractLast(request.term); console.log("Term: " + q); if (q.indexOf("@") == 0) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter(tags, q)); } }, focus: function() { // prevent value inserted on focus 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; } }); });
#text_box { width: 75%; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <textarea id="text_box"></textarea>
Update 更新
If you suspect that you will have multiple symbols, you could make use of a switch()
statement or a complex if()
. 如果您怀疑会有多个符号,则可以使用
switch()
语句或复杂的if()
。 Something like: 就像是:
if(q.indexOf("@") == 0 || q.indexOf("$") == 0 || q.indexOf("#") == 0){
response($.ui.autocomplete.filter(tags, q));
}
Or: 要么:
switch(true){
case (q.term.indexOf("@") == 0):
case (q.term.indexOf("$") == 0):
case (q.term.indexOf("#") == 0):
response($.ui.autocomplete.filter(tags, q));
break;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.