CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-typeahead
user3926384
user3926384

Reputation: 11

Bootstrap typeahead doesnt work

Can some one help to figure out what is wrong with this piece of code, typeahead doesn't seem to work. Any help is highly appericated.

<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div style="margin: 50px 50px">
      <label for="product_search">Product Search: </label>
      <input id="product_search" type="text" data-provide="typeahead">
    </div>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

    <script>
      $(document).ready(function($) {
        // Workaround for bug in mouse item selection
        $.fn.typeahead.Constructor.prototype.blur = function() {
          var that = this;
          setTimeout(function () { that.hide() }, 250);
        };

        $('#product_search').typeahead({
          source: function(query, process) {
            return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
          }
        });
      });
    </script>
  </body>
</html>

Upvotes: 0

Views: 517

Answers (1)

Paullo
Paullo

Reputation: 2127

The problem is in your "source" source is expects to be a list of JSON Object. Can you change 

    $('#product_search').typeahead({
      source: function(query, process) {
        return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
      }
    });

To: 

$('#product_search').typeahead({
    source: [
        {id: 1, name: 'Deluxe Bicycle'},
        {id: 2, name: 'Super Deluxe Trampoline'},
        {id: 3, name: 'Super Duper Scooter'}
    ]
});

And tell me if it works:)

Upvotes: 4

Related Questions