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”

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

“你好，坦克可以联系我们，在星期一，星期三和星期五晚上9点到下午6点你可以找到我们在一些地址，12345 - 一些城市”

问题：我该怎么做？插件可以这样做，还是我需要创建自己的算法？

Answer 1

正如我所提到的，通过对演示的一些细微更改，您可以快速替换菜单。

＆＃13;

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

＆＃13;

#text_box {
  width: 75%;
}

＆＃13;

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

＆＃13;

<强>更新

如果您怀疑自己有多个符号，则可以使用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;
}

递归标记搜索Autocomplete - jQuery插件

1 个答案: