CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Rhys Edwards
Rhys Edwards

Reputation: 791

Jquery autocomplete not filling textbox

I have an autocomplete function that filters through local json to return results to a textbox, however on selecting a location, the autocomplete does not fill the text box. I have tried to include a select method as per the docs but it breaks my functionality. Where should I include the select in my codebase?

Autocomplete function:

  $('#autocomplete').autocomplete({
      minLength: 1,
      source: function(request, response) {
              var data = $.grep(suggestion, function(value) {
                  return value.city.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase(); // Here the suggestion array is filtered based on what the user has typed. User input will be captured in the request.term
              });

              response(data); // this will return the filtered data which will be attached with the input box.
      }

     }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

                  return $( "<li></li>" )
                      .data( "ui-autocomplete-item", item )
                      .append( "<a>" + item.city + "," + item.country + "</a>" )
                      .appendTo( ul ); // here we are creating and appending appending element based on the response object we got after filtering
              };

    });

Data

var suggestion =

      [
      {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
      ,
      {"id":"2","name":"Madang","city":"Madang","country":"Papua New Guinea","iata":"MAG","icao":"AYMD","latitude":"-5.207083","longitude":"145.7887","altitude":"20","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
      ,
      {"id":"3","name":"Mount Hagen","city":"Mount Hagen","country":"Papua New Guinea","iata":"HGU","icao":"AYMH","latitude":"-5.826789","longitude":"144.295861","altitude":"5388","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
      ,
      {"id":"4","name":"Nadzab","city":"Nadzab","country":"Papua New Guinea","iata":"LAE","icao":"AYNZ","latitude":"-6.569828","longitude":"146.726242","altitude":"239","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
      ,
      {"id":"5","name":"Port Moresby Jacksons Intl","city":"Port Moresby","country":"Papua New Guinea","iata":"POM","icao":"AYPY","latitude":"-9.443383","longitude":"147.22005","altitude":"146","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
    ]

Upvotes: 0

Views: 728

Answers (1)

maxime_039
maxime_039

Reputation: 494

The select can be placed before or after the source in your case, as long as it stays in the autocomplete object as a property. You can follow this example:

$('#autocomplete').autocomplete({
    minLength: 1,
    source: function (request, response) { ... },
    select: function (event, ui) {
        event.preventDefault();
        // [...] your code here
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) { ... };

Upvotes: 2

Related Questions