递归标签搜索Autocomplete - jQuery插件

Question

我正在使用jQuery autocomplete插件来搜索textarea中的标签。

这是完美的工作，但现在我需要再次搜索时，用户在文本框中键入。

例如，我有：

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); 
      })); 

     } 

    }); 

因此，如果用户写：

“你好，坦克与我们联系，在那里是可以找到我们在@address能够#schedules”

插件必须再次搜索所有巧合，并在每次底部的文本框中提示它们。并且在文本框中的修复字符串必须是：

“您好，坦克联系我们，哪里能够在星期一，星期三和星期五从晚上9点到下午6点你可以找到我们在某些地址， 12345 - Some City“

问题：我该怎么做？插件可以做到这一点，或者我需要创建我自己的算法？

Answer 1

正如我所提到的，通过对Demo进行一些小改动，您可以制作一个快速替换菜单。

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" 
 
}]; 
 

 
$(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>

更新

如果你怀疑你将有多个符号，你可以利用一个switch()陈述或复杂if()的。喜欢的东西：

if(q.indexOf("@") == 0 || q.indexOf("$") == 0 || q.indexOf("#") == 0){ 
    response($.ui.autocomplete.filter(tags, q)); 
} 

或者：

switch(true){ 
    case (q.term.indexOf("@") == 0): 
    case (q.term.indexOf("$") == 0): 
    case (q.term.indexOf("#") == 0): 
    response($.ui.autocomplete.filter(tags, q)); 
    break; 
}