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数据。由于您既没有提供结果示例，也没有提供PHP代码段，因此很难进一步提供帮助。

希望这会有所帮助。

自动完成功能可循环搜索带有ajax回调结果的搜索词

1 个答案: