javascript - 自动完成的递归标签搜索 - jQuery 插件

Question

我正在使用 jQuery autocomplete用于在文本区域中搜索标签的插件。

它工作得很好，但现在我需要在用户在文本框中键入内容时再次搜索。

例如，我有:

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

        }

    });

所以如果用户写:

“您好，坦克，请联系我们，#schedules，您可以在@address找到我们”

插件必须再次搜索所有巧合，并每次将它们建议在文本框的底部。文本框中的结果字符串必须是:

“您好，坦克，请联系我们，周一、周三和周五晚上 9:00 到下午 6:00 您可以在 Some Address, 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;
}