CODEWITHSUNDEEP
javascriptjqueryalgolia
Przemek Wojtas
Przemek Wojtas

Reputation: 1371

Javascript display search results on page

I have a live search using algolia.

<input type="text" class="form-control" id="search_text" onkeyup="search_data(this.value);" placeholder="Search">

And my js is like this

 var client = algoliasearch('''', '''');
        var index = client.initIndex('businesses'); 
    function search_data(search_value) {
    index.search(search_value, function searchDone(err, content) {
      if (err) {
        console.error(err);
        return;
      }

      for (var h in content.hits)
      console.log(content);
        console.log('Hit(' + content.hits[h].objectID + '): ' + content.hits[h].toString());

    });

    // with params
    index.search(search_value, {
      attributesToRetrieve: ['name'],
      hitsPerPage: 50
    }, function searchDone(err, content) {
      if (err) {
        console.error(err);
        return;
      }

      for (var h in content.hits) {
        console.log('Hit(' + content.hits[h].objectID + '): ' + content.hits[h].toString());
      }
    });
    }

Output in console log looks like this:

Object{
  hits: Array(2),
  nbHits: 2,
  page: 0,
  nbPages: 1,
  hitsPerPage: 20…
}exhaustiveNbHits: truehits: Array(2)0: Object1: Objectapi_key: 10565created_at: nullemail: "n/a"facebook_business: nullgallery_id: nullid: 1image: nullinstagram_business: nulllogo: nullname: "Odeon Cinema"objectID: "1"twitter_business: nulltype: "3"updated_at: nulluser_id: 1

But now I am stuck. How do I output this on a page? From these results I want to output all results, showing the name

//edit

    var client = algoliasearch('75RQSC1OHE', 'f06169611a53cb7e026f364739162cb9');
    var index = client.initIndex('businesses'); 
function search_data(search_value) {
    index.search(search_value, {
        attributesToRetrieve: ['name'],
        hitsPerPage: 5
    }, function searchDone(err, content) {
    if (err) {
    console.error(err);
    return;
  }
  for (var h in content.hits) {
    $('.test').append("<li>" + content.hits[h].name + "</li>");
  }
});
}

Upvotes: 1

Views: 1169

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

To clear .test before appending. Use $('.test').html(''); before for loop.

Upvotes: 1

Related Questions