CODEWITHSUNDEEP
javascripthtmljqueryapisearch
Vito
Vito

Reputation: 786

suggestion box in autocomplete search doesn't appear

I would like to create an auto-complete input box using the Photon service. What I tried to do was create an ajax request that would return the results. By entering a few letters of an address the Photon API should show me the results, as in the picture:

enter image description here

What I have writte is the following:

html

  <div class="frmSearch">
    <input type="text" id="search-box" placeholder="Country Name" />
    <div id="suggesstion-box"></div>
</div>

js

$("#search-box").keyup(function(){
        $.ajax({
        type: "GET",
        url: "http://photon.komoot.de/api/?q=" + $("#search-box").val(),

        beforeSend: function(){
            $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(results){

       var aList = results.features;
       var aOptions = [];
       for (i=0; i < aList.length; i++) {
           optKey = aList[i].geometry.coordinates[0]+','+aList[i].geometry.coordinates[1];
           optLabel = aList[i].properties.name+', '+aList[i].properties.street+' '+aList[i].properties.housenumber+', '+
              aList[i].properties.city+', '+aList[i].properties.postcode;
           aOptions.push({
              "value": optKey,
              "label": optLabel
           });
       }

   

            $("#suggesstion-box").show();
            $("#suggesstion-box").html(aOptions);
            $("#search-box").css("background","#FFF");
        }
        });
    });

The API call works great but my suggestion box doesn't appear.. What I'm doing wrong?

Upvotes: 1

Views: 652

Answers (1)

firatozcevahir
firatozcevahir

Reputation: 882

You cannot add objects directly with html() function. You can only pass string

So you need to parse your object array as string

$("#search-box").keyup(function() {
  $.ajax({
    type: "GET",
    url: "https://photon.komoot.de/api/?q=" + $("#search-box").val(),

    beforeSend: function() {
      $("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
    },
    success: function(results) {

      var aList = results.features;
      var aOptions = [];
      let htmlVal = '';
      for (i = 0; i < aList.length; i++) {
        optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];
        optLabel = aList[i].properties.name + ', ' + aList[i].properties.street + ' ' + aList[i].properties.housenumber + ', ' +
          aList[i].properties.city + ', ' + aList[i].properties.postcode;
        aOptions.push({
          "value": optKey,
          "label": optLabel
        });
        htmlVal += `${optKey} ${optLabel} <br />`; // add each value to htmlVal
      }

      $("#suggesstion-box").show();
      $("#suggesstion-box").html(htmlVal);
      $("#search-box").css("background", "#FFF");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmSearch">
  <input type="text" id="search-box" placeholder="Country Name" />
  <div id="suggesstion-box"></div>
</div>

Upvotes: 1

Related Questions