Twitter Bootstrap Typeahead - Id & Label

Question

I\'m using Bootstrap 2.1.1 and jQuery 1.8.1 and trying to use Typeahead\'s functionality.

I try to display a label and use an id li

Answer 1

I made an Angular 2 directive, typeahead-angular2, that does exactly what you want, and handles the case of non-unique labels as well. You can take the typeahead part.

This directive handle complexe objects with multiple attributes and handle the case where the label isn't unique. it basicly recieves 4 parameters :

• @Input() name; //name for typeahead
• @Input() objectsDataSet; // a dataSet of objects , it could be any kind of object
• @Input() handleFunction; // a callback function that is called when the object is selected , you can pass the object or whatever you want to this function.
• @Input() labelAtt; // the label attribute (object[labelAtt] is displayed to the user , it must be a string).

example :

as you can see : clientList is an array of "client" objects , let's say {"Fistname":"Billel","Lastname":"Guerfa",....} we use the Firstname attribute for the autocomplete list. logClient here recieves a client object and displays it.

Dependencies :

just declare the typeahead script at the index.html level.

• typeahead : https://twitter.github.io/typeahead.js/

See: https://github.com/BillelGuerfa/typeahead-angular2/