I am working on a project that requires to typeahead textbox when some data is inputted and the data will be fetched from a webservice using query string.
I only want to show the Name, StateCode, ZipCode and ZipCodeType, Currently it's not working.
This is the code I wrote with sample JSON string
<script>
$.typeahead({
input: '.js-typeahead-city',
order: "desc",
source: {
data: [
{
"Value":"Boston, KY 40107 - Standard",
"Name":"Boston",
"Type":"Prefered",
"ZipCode":"40107",
"ZipCodeType":"Standard",
"StateCode":"KY",
"StateName":"Kentucky",
"StateFIPS":"21",
"CountryCode":"US",
"ContryName":null,
"Latitude":37.753515,
"Longitude":-85.637791,
"Country":"Nelson"
"ContryFIPS":"21179"
"TimeZone":"Eastern",
"GMT":-5,
"AreaCode":"502"
},
{
"Value":"Boston, MA 02111 - Standard",
"Name":"Boston",
"Type":"Prefered",
"ZipCode":"02111",
"ZipCodeType":"Standard",
"StateCode":"MA",
"StateName":"Massachusetts",
"StateFIPS":"25",
"CountryCode":"US",
"ContryName":null,
"Latitude":42.351267,
"Longitude":-71.064699,
"Country":"Suffolk"
"ContryFIPS":"25025"
"TimeZone":"Eastern",
"GMT":-5,
"AreaCode":"617"
},
]
},
callback: {
onInit: function (node) {
console.log('Typeahead Initiated on ' + node.selector);
}
}
});
</script>
Use the display
configuration property to determine which properties of each item are used to find matches and return display results:
$.typeahead({
display: ['Name', 'StateCode', 'ZipCode', 'ZipCodeType'],
// the rest of your configuration goes here
});
$(function() {
$.typeahead({
display: ['Name', 'StateCode', 'ZipCode', 'ZipCodeType'],
input: '.js-typeahead-city',
order: "desc",
source: {
data: [{
"Value": "Boston, KY 40107 - Standard",
"Name": "Boston",
"Type": "Prefered",
"ZipCode": "40107",
"ZipCodeType": "Standard",
"StateCode": "KY",
"StateName": "Kentucky",
"StateFIPS": "21",
"CountryCode": "US",
"ContryName": null,
"Latitude": 37.753515,
"Longitude": -85.637791,
"Country": "Nelson",
"ContryFIPS": "21179",
"TimeZone": "Eastern",
"GMT": -5,
"AreaCode": "502"
},
{
"Value": "Boston, MA 02111 - Standard",
"Name": "Boston",
"Type": "Prefered",
"ZipCode": "02111",
"ZipCodeType": "Standard",
"StateCode": "MA",
"StateName": "Massachusetts",
"StateFIPS": "25",
"CountryCode": "US",
"ContryName": null,
"Latitude": 42.351267,
"Longitude": -71.064699,
"Country": "Suffolk",
"ContryFIPS": "25025",
"TimeZone": "Eastern",
"GMT": -5,
"AreaCode": "617"
},
]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<form id="form-country_v1" name="form-country_v1">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="js-typeahead-city" name="city" placeholder="Search" autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit">
<i class="typeahead__search-icon"></i>
</button>
</div>
</div>
</div>
</form>