jquerytypeahead.js

Jquery Typeahead not returning data FROM JSON


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>

Solution

  • 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>