CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptypeahead
Belgin Fish
Belgin Fish

Reputation: 19837

Highlighter Alternative Using Bootstrap Typeahead

I'm currently using a bootstrap 3 typeahead module from

https://github.com/bassjobsen/Bootstrap-3-Typeahead

When a user searches, sometimes the suggestion returned does not actually contain any of the text they are searching for.

For example, a user could be searching for Athletic Clothing and my search suggestion algorithm may return Nike to TypeAhead.

Everything is good, except I'm overriding the TypeAhead display by specifying the highlighter function it should use to display the data.

It appears the highlighter function is only called when the users search text is present in the suggestion item. So in this case, my Nike search suggestion is not being displayed by the highlighter function.

Is there a way to force the highlighter function upon every typeahead element? Even those not containing the users query.

This is my highlighter function:

highlighter: function(data){
                var itm = ''
                         + "<div class='typeahead_wrapper'>"
                         + "<a href='/users.php?user="+data+"'><img width='30' class='typeahead_photo' src='/profiles/" + data + ".jpg' /></a>"
                         + "<div class='typeahead_labels'>"
                         + "<div class='typeahead_primary'><a href='/users.php?user="+data+"'>" + data + "</a></div>"
                         + "</div>"
                         + "</div>";
                return itm;
            }

Upvotes: 2

Views: 1466

Answers (1)

Belgin Fish
Belgin Fish

Reputation: 19837

I ended up using a very poor method to solve the issue.

I modified the data being returned to typeahead to be in the format

value**matched text

Then at the top of the highlighter function I simply called split to extract the value from it before outputting.

Upvotes: 0

Related Questions