Search with one more value

Today, I will show you how to display different value on list and how to search from another value.

When i was doing my project, i have to display list item with different search value. So i have customized bootstrap for this.

To do this use attribute “renderField”.

Example :

$('#typeahead').typeahead({

     renderField: "display_text",

});

you have to add this renderField into data object.

Data object example :

item = {}

item.display_text = "searchvalue1 searchvalue2";

item.value= "displayvalue";

When you type searchvalue1  or searchvalue2 or displayvalue. This item will show in all three search. and it will display displayvalue only.

 

#codewithgeek #codewithjaydip

Li color based on condition

Bootstrap Typeahead is used for autosuggestion list based on type text in input.

I have customized this js and added more function, so that you can easily used this for multi purpose.

Li color based on condition

To change color of list element based on search content. I have added colour attribute for this.

$('#typeahead').typeahead({
   colour: "colourCondition"
});

Here coloutCondition is javascript function

function colourCondition(item, i) {
       if (item.type == 3) {
            i.addClass("color-brown"
       }
}

Download bootstrap-typeahead.js from github