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 autoplete 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 mon 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 Autoplete - Default functionality</title>
<link rel="stylesheet" href=".10.3/themes/smoothness/jquery-ui.css" />
<script src=".9.1.js"></script>
<script src=".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" ).autoplete({
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 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 autoplete 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 mon 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 Autoplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./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" ).autoplete({
source: availableTags, multiple: true,
mustMatch: false
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
- 3 I think what you want is fuzzy searching. At a glance, something like kiro.me/projects/fuse.html may suit your fancy. – Ehtesh Choudhury Commented Sep 30, 2013 at 0:55
- Thank you, I have never heard that term before. – Wonton_User Commented Sep 30, 2013 at 1:05
- And for HTML code, jsfiddle is very useful for hosting examples. – Ehtesh Choudhury Commented Sep 30, 2013 at 1:10
- @ColonelCese I have added a solution see if that works for you – PSL Commented Sep 30, 2013 at 1:47
1 Answer
Reset to default 14Try overriding the default filter logic provided by auto plete.
// Overrides the default autoplete filter function to search for matched on atleast 1 word in each of the input term's words
$.ui.autoplete.filter = function (array, terms) {
arrayOfTerms = terms.split(" ");
var term = $.map(arrayOfTerms, function (tm) {
return $.ui.autoplete.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 plete's filter function as it is.
function customFilter(array, terms) {
arrayOfTerms = terms.split(" ");
var term = $.map(arrayOfTerms, function (tm) {
return $.ui.autoplete.escapeRegex(tm);
}).join('|');
var matcher = new RegExp("\\b" + term, "i");
return $.grep(array, function (value) {
return matcher.test(value.label || value.value || value);
});
};
$("#tags").autoplete({
source: availableTags,
multiple: true,
mustMatch: false
,source: function (request, response) {
response(customFilter(
availableTags, request.term));
},
});
Fiddle