Autocomplete to loop through search terms with ajax callback results

Question

I'm setting up an autocomplete form in which I need that every keyword/term is matched.

I'm using an ajax callback to get my results list and I tried many workarounds to convert json results to a autocomplete-capable array but I couldn't get it to work.

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

I think the code itself is working because if I push a normal javascript array it works just fine but as long as I get results from ajax and convert it to a javascript array, it doesn't work anymore.

What I trying to get is that if a given results is equal to "example book title", it should pop up even if my keywords are "example title" or "title book example" etc...

Answer 1

Based on your description, if the user enters multiple words, you want it to show the results for each of the searches for each of those words. For example, if the user enters "hot air", results would include all the results for "hot" and all the results for "air".

Consider the following example.

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

If the user enters "win" or "win ", it will still hit the source data. If the user enters "win heart", it will filter the source data for both terms individually, combining all the results into one array. There will likely be duplicates. In the steps, we can filter those duplicates out and send the resulting array back.

In your code, you will want send each search term to PHP, which should return an Array or an Array of Objects. In the same way you'll collect all the results into one array and then filter.

Alternatively, you can do all the work on the PHP Side, send the entire chunk to PHP and have it perform the search and filtering (potentially faster) and return all the results.

Update

If all you want to do is get the array via ajax, review the following:

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

This assumes that PHP will return JSON Data that is an array of results. Since you have not provided an example of the results nor a snippet of your PHP, it's hard to help further.

Hope this helps.