遞歸標籤搜索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; 
}