Search code examples
javascriptmongodbsearchbartwitter-typeahead

typeahead.js or bloodhound not working for me

I'm not getting any suggestions. what am I missing

var states = new Bloodhound({
    // datumTokenizer : function(d){return Bloodhound.tokenizers.whitespace(d.name) },
    datumTokenizer :  Bloodhound.tokenizers.whitespace("name"),
    queryTokenizer : Bloodhound.tokenizers.whitespace,
    // local : states
    prefetch : "http://localhost:3000/all.json"
})
console.log(states)
states.initialize()
$("#prefetch .typehead").typeahead({
    hint : true,
    hightlight : true,
    minLength : 1,

},{
    name : "states",
    source : states,
    display : "name",
    displayKey : "name"
})

JSON like this

[{"_id":"573ff845d35b36f82c6cc71e","created_at":"2016-05-21T05:55:17.335Z","inc":0,"updated_at":"2016-05-21T05:56:23.569Z","name":"comp1","pizza":"pizza1","ranking":20,"num":3,"__v":0},{"_id":"573ff845d35b36f82c6cc71f","created_at":"2016-05-21T05:55:17.340Z","inc":0,"updated_at":"2016-05-21T05:55:17.340Z","name":"comp2","pizza":"pizza2","ranking":5,"num":1,"__v":0},{"_id":"573ff845d35b36f82c6cc720","created_at":"2016-05-21T05:55:17.342Z","inc":0,"updated_at":"2016-05-21T05:55:17.342Z","name":"comp3","pizza":"pizza3","ranking":10,"num":1,"__v":0}]
Solution

  • Set a templates object having a suggestion property that is a function returning an html string containing suggestion to be displayed.

    Substitute datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name") for datumTokenizer: Bloodhound.tokenizers.whitespace("name"); add .ttAdapter() following setting states at source.

    Not certain which property of object selected, or other html should be displayed at suggestion container? Used pizza property of selected object at stacksnippets

    $(function() {

  var states = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "https://gist.githubusercontent.com/guest271314/"
              + "5b1b22a728f97a8847034c3f9dba69b0/raw/"
              + "fc016e61fed65b45e027837dada9f60e6793bc4b/comp.json"
  });

  states.initialize();

  $("#prefetch.typeahead").typeahead({
    minLength: 1,
    hint: true,
    highlight: true
  }, {
    name: "suggestions",
    display: "name",
    templates: {
      suggestion: function(data) {
        console.log(data);
        // set `html` to be displayed at suggestion dropdown
        var suggest = "<li>" + data.pizza + "</li>";
        return suggest
      }
    },
    source: states.ttAdapter()
  });
})
    div.search {
  font-family: sans-serif;
  position: relative;
  margin: 100px;
}
.typeahead,
.tt-query,
.tt-hint {
  border: 2px solid #CCCCCC;
  border-radius: 8px;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 8px 12px;
  width: 396px;
}
.typeahead {
  background-color: #FFFFFF;
}
.typeahead:focus {
  border: 2px solid #0097CF;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}
.tt-suggestion {
  font-size: 24px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
    <!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
  </head>
  <body>
    <div class="search">
  <input type="text" id="prefetch" class="typeahead" placeholder="search" />
      </div>
  </body>
</html>