Jquery Typeahead not returning data FROM JSON

Question

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>

Answer 1

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>