Jquery Autocomplete matching multiple unordered words in a string

Question

I am trying to show the best match of the search term typed in. For example

Right now Jquery does not give me the desired effect. When I type: one today the autocomplete will show nothing but if I type one day it will show the search results that start with those two words in that order. I want one today to show up one day is the first and last today. I want the search results to show up that have those words in them the ordering is not important. I have looked through here and could find nothing like this, it seems like such a common searching method I cannot see why no one has asked this question. Is there a built in method that handles this?

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [

          "one day is the first and last today" , "tuesday is today" , "one" , "one day is tomorrow"


    ];
    $( "#tags" ).autocomplete({
      source: availableTags, multiple: true,
        mustMatch: false
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


</body>
</html>

I think what you want is fuzzy searching. At a glance, something like kiro.me/projects/fuse.html may suit your fancy. — Ehtesh Choudhury
– Ehtesh Choudhury, Commented Sep 30, 2013 at 0:55
And for HTML code, jsfiddle is very useful for hosting examples. — Ehtesh Choudhury
– Ehtesh Choudhury, Commented Sep 30, 2013 at 1:10
@ColonelCese I have added a solution see if that works for you — PSL
– PSL, Commented Sep 30, 2013 at 1:47

PSL · Accepted Answer · 2013-09-30 01:29:40Z

14

Try overriding the default filter logic provided by auto complete.

// Overrides the default autocomplete filter function to search for matched on atleast 1 word in each of the input term's words
$.ui.autocomplete.filter = function (array, terms) {
    arrayOfTerms = terms.split(" ");
    var term = $.map(arrayOfTerms, function (tm) {
         return $.ui.autocomplete.escapeRegex(tm);
    }).join('|');
   var matcher = new RegExp("\\b" + term, "i");
    return $.grep(array, function (value) {
       return matcher.test(value.label || value.value || value);
    });
};

Fiddle

Or create your own filter function and handle the search's return, so keeping complete's filter function as it is.

function customFilter(array, terms) {
    arrayOfTerms = terms.split(" ");
    var term = $.map(arrayOfTerms, function (tm) {
         return $.ui.autocomplete.escapeRegex(tm);
    }).join('|');
   var matcher = new RegExp("\\b" + term, "i");
    return $.grep(array, function (value) {
       return matcher.test(value.label || value.value || value);
    });
};

$("#tags").autocomplete({
    source: availableTags,
    multiple: true,
    mustMatch: false
    ,source: function (request, response) {
        response(customFilter(
        availableTags, request.term));
    },
});

Fiddle

answered Sep 30, 2013 at 1:29

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wonton_User Over a year ago

Thank you very much! I am going to fiddle with it to make all searched words mandatory in the result.

PSL Over a year ago

@ColonelCese You are welcome. Take the second option so you don't overwrite existing autocomplete filter.

Collectives™ on Stack Overflow

Jquery Autocomplete matching multiple unordered words in a string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related