自动完成功能，通过ajax回调结果循环遍历搜索词

Question

我正在设置一个自动完成表单，其中我需要匹配每个关键字/术语。

我使用 ajax 回调来获取结果列表，并且尝试了许多解决方法将 json 结果转换为支持自动完成的数组，但我无法让它工作。

        $(this).autocomplete({
            source: function (request, response) {
            $.ajax({
                 url: 'autocomplete.php',
                 data: request.term,
                 dataType: "json",
                 success: function (data) { 
                    var dataArray = [];

                    for(var i in data)
                        dataArray.push(data[i]);

                    var matchArray = dataArray.slice();
                    var srchTerms   = $.trim (request.term).split (/\s+/);
                    $.each (srchTerms, function (J, term) {
                        var regX    = new RegExp (term, "i");
                        matchArray   = $.map (matchArray, function (item) {
                            return regX.test (item)  ?  item  : null; 
                        } );
                    } );

                    response(matchArray);

                 },
                 error: function () {
                     response([]);
                 }
             });
            },
            autoFocus: true
         });

我认为代码本身是有效的，因为如果我推送一个普通的 javascript 数组，它工作得很好，但只要我从 ajax 获取结果并将其转换为 javascript 数组，它就不再工作了。

我想要得到的是，如果给定的结果等于“示例书名”，即使我的关键字是“示例书名”或“书名示例”等，它也应该弹出......

Answer 1

根据您的描述，如果用户输入多个单词，您希望它显示每个单词的每次搜索结果。例如，如果用户输入“热空气”，结果将包括“热”的所有结果和“空气”的所有结果。

考虑以下示例。

$(function() {
  var availableTags = [
    "win the day",
    "win the heart of",
    "win the heart of someone"
  ];

  $("#tags").autocomplete({
    source: function(req, resp) {
      // Trim Query and split by " " (Space)
      var srchTerms = req.term.trim().split(" ");
      // Prepare result Arrays
      var results = [],
        uniqueResults = [];
      // Iterate each search term and combine the results into one array
      $.each(srchTerms, function(i, t) {
        results = results.concat($.ui.autocomplete.filter(availableTags, t));
      });
      // Remove duplicates by iterating each result item
      $.each(results, function(i, r) {
        if ($.inArray(r, uniqueResults) === -1) uniqueResults.push(r);
      });
      // Send back to Autocomplete
      resp(uniqueResults);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<div class="demo">
  <div class="ui-widget">
    <label for="tags">Multi-word search: </label>
    <input id="tags">
  </div>
</div>

如果用户输入“win”或“win”，仍然会命中源数据。如果用户输入“win heart”，它将分别过滤这两个术语的源数据，并将所有结果合并到一个数组中。可能会有重复。在这些步骤中，我们可以过滤掉这些重复项并将结果数组发回。

在您的代码中，您需要将每个搜索词发送到 PHP，PHP 应返回一个数组或对象数组。以同样的方式，您将把所有结果收集到一个数组中，然后进行过滤。

或者，您可以在 PHP 端完成所有工作，将整个块发送到 PHP 并让它执行搜索和过滤（可能更快）并返回所有结果。

更新

如果您只想通过 ajax 获取数组，请查看以下内容：

function (request, response) {
  $.getJSON("autocomplete.php", {term: request.term}, function(data){
    var matchArray = [];
    $.each(data, function(key, val){
      matchArray.push(val);
    });
    var srchTerms = $.trim(request.term).split(/\s+/);

    $.each (srchTerms, function (J, term) {
      var regX = new RegExp (term, "i");
      matchArray = $.map (matchArray, function (item) {
        return (regX.test(item) ?  item : null);
      });
    });
    response (matchArray);
  });
}

这假设 PHP 将返回 JSON 数据，即结果数组。