CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-typeaheadbloodhound
aidonsnous
aidonsnous

Reputation: 1503

Bootstrap Typeahead is not displaying suggestion list

I follow the documentation of typeahead but nothing is working for me. I am loading my data from remote : Here is the structure of data coming from remote:

{"source":[{id:1,name:"coke"},{id:2,name:"papa"},{id:3,name:"mama"}]} on client side here is my first code I tried with : 

var typeaheadInput = $('input[name=name]');
       typeaheadInput.typeahead({
           source: function (query) {
               if (query.length > 3) {
                   return $.get('/suggestproduct/' + query, function (data) {
                       return data.source;
                   });
               }
           },autoSelect:true
       });

Nothing worked with that code. The information are reaching the browser but are not being shown. I tried also to read about bloodhound but didn't understand anything, even the question asked previously. I need a clear explaination.

What I want is, using Bootstrap Typeahead to show the list(suggestion, autocomplete) of items in my array but the value of name field and pass the id field value of the selected item to a hidden field.

How can I acheive that?

Upvotes: 0

Views: 210

Answers (1)

Nair Athul
Nair Athul

Reputation: 821

Can you please try this fiddle

I think you can use this

http://jsfiddle.net/apougher/7aaRy/

<input id='product'></input>

var jsonData = [
  {
    "id": 1,
    "name": "Andrew Pougher"
  },
  {
    "id": 2,
    "name": "Michele Moore"
  },
  {
    "id": 3,
    "name": "Michele Boob"
  },
  {
    "id": 4,
    "name": "Michael Moore"
  },
  {
    "id": 5,
    "name": "George Michael"
  }
]

var productNames = new Array();
var productIds = new Object();
//$.getJSON( '/getAjaxProducts', null,
       // function ( jsonData )
        //{
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.name );
                productIds[product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
       // };

Upvotes: 0

Related Questions