I'm using a JS plugin called EasyAutocomplete to handle advanced autosuggestion on my website. It supports remote data sets (JSON, XML, plain text) and uses ajax method calls to search, sort and match the response phrase.
I'm trying to write a custom match formula, which it allows me to do, but would love some help writing this out.
Right now, as you type, it searches for any part of a word/phrase for what you're typing. I'd like to have it only check the beginning of each word in a single or multi-word phrase.
Let's say my remote data set contains:
"Market Street"
"Market Thestreet Lane"
"Street South Road"
If my search is "Street", by the plugin's default functionality, all 3 results will show, because the word "street" is part of each of those 3 results. (Demo Below)
I found a similar question to mine on the plugin's Github repo (and the answer from the plugin author), but that question was for matching only the beginning of each result item (not each word in each result item). So if my search is "Street", only the third result will show. (Demo Below)
My question is for a match formula that searches the beginning of any word in a result item. So, if my search is "Street", the first and third result will show.
Here is how the plugin functions by default (I've commented out the custom match formula):
jQuery(document).ready(function($) {
var options = {
data: [
{"name": "Market Street", "parent": "Dog Management", "link": "https://marketstreet.com"},
{"name": "Market Thestreet Lane", "parent": "Dog Management", "link": "https://marketlane.com"},
{"name": "Street South Road", "parent": "Cat Management", "link": "https://streetsouthroad.com"}
],
getValue: "name",
list: {
match: {
enabled: true,
/*
method: function(element, phrase) {
if(element.indexOf(phrase) === 0) {
return true;
} else {
return false;
}
}
*/
},
onSelectItemEvent: function() {
var selectedItemValue = $("#companies").getSelectedItemData().parent;
var selectedItemLink = $("#companies").getSelectedItemData().link;
$("#company_result").html('<a href="'+selectedItemLink+'">Contact '+selectedItemValue+'</a>').trigger("change");
},
},
template: {
type: "description",
fields: {
description: "parent"
}
}
};
$("#companies").easyAutocomplete(options);
});<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://d3vv6lp55qjaqc.cloudfront.net/items/040r1I2Y1K3T3w3L3i3E/easy-autocomplete.css'>
<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://d3vv6lp55qjaqc.cloudfront.net/items/2Q0s1P3D0D2i3u0M1m1x/jquery.easy-autocomplete.min.js'></script>
<div class="container">
<br>
<div class="row">
<div class="col-md-8 col-offset-3">
<p>Search for "Street"</p>
<form style="text-align: center; margin: 0 auto;" onkeypress="return event.keyCode != 13;">
<input class="form-control" id="companies" placeholder="Type your resort property name..."/>
<div id="company_result"></div>
</form>
</div>
</div>
</div>Here is that custom match formula that only matches if the result item begins with the search phrase:
jQuery(document).ready(function($) {
var options = {
data: [
{"name": "Market Street", "parent": "Dog Management", "link": "https://marketstreet.com"},
{"name": "Market Thestreet Lane", "parent": "Dog Management", "link": "https://marketlane.com"},
{"name": "Street South Road", "parent": "Cat Management", "link": "https://streetsouthroad.com"}
],
getValue: "name",
list: {
match: {
enabled: true,
method: function(element, phrase) {
if(element.indexOf(phrase) === 0) {
return true;
} else {
return false;
}
}
},
onSelectItemEvent: function() {
var selectedItemValue = $("#companies").getSelectedItemData().parent;
var selectedItemLink = $("#companies").getSelectedItemData().link;
$("#company_result").html('<a href="'+selectedItemLink+'">Contact '+selectedItemValue+'</a>').trigger("change");
},
},
template: {
type: "description",
fields: {
description: "parent"
}
}
};
$("#companies").easyAutocomplete(options);
});<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://d3vv6lp55qjaqc.cloudfront.net/items/040r1I2Y1K3T3w3L3i3E/easy-autocomplete.css'>
<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://d3vv6lp55qjaqc.cloudfront.net/items/2Q0s1P3D0D2i3u0M1m1x/jquery.easy-autocomplete.min.js'></script>
<div class="container">
<br>
<div class="row">
<div class="col-md-8 col-offset-3">
<p>Search for "Street"</p>
<form style="text-align: center; margin: 0 auto;" onkeypress="return event.keyCode != 13;">
<input class="form-control" id="companies" placeholder="Type your resort property name..."/>
<div id="company_result"></div>
</form>
</div>
</div>
</div>Thank you!
