From Jquery-ui autocomplete to typeahead.js

Question

I am migrating my app to twitter-bootstrap and i would like to replace my jquery-ui autocomplete with typeahead.js.

It would be better to use the feature embedded in twitter-bootstrap but i am ok with the extra typeahead plugin if necessary.

My problem is that i have trouble reproducing the current behaviour especially with the absence of results.

How would you do something like that?

$("#search").autocomplete({
           source : myUrl,
            delay : 100,
            minLength : 2,
            select : function(event, ui) {
              // do whatever i want with the selected item
            },

            response : function(event, ui) {
                if (ui.content.length === 0) {
                    ui.content.push({
                        label : "No result",
                        value : customValue
                    });
                }
            }
        });

Basically, if there is no result, i want to display a custom message in the component.

Thanks!

Have you seen this question: stackoverflow.com/q/9232748/497356? — Andrew Whitaker
– Andrew Whitaker, Commented May 15, 2013 at 19:51

Carol Skelly · Accepted Answer · 2013-05-16 17:02:01Z

5

The migration to Bootstrap typeahead would look something like..

$('.typeahead').typeahead({
  minLength:2,
  updater: function (item) {
     /* do whatever you want with the selected item */

    },
  source: function (typeahead, query) {
     /* put your ajax call here..
     return $.get('/typeahead', { query: query }, function (data) {
        return typeahead.process(data);
     });
     */      
    }
});

EDIT:

I've updated the demo to include a sorter and highlighter. I think this will get you the results you want..

  sorter: function(items) {
    if (items.length == 0) {
        var noResult = new Object();
        items.push(noResult);
    }
    return items;    
    },
  highlighter: function(item) {
    if (dataSource.indexOf(item) == -1) {
        return "<span>No Match Found.</span>";
    }
    else {
       return "<span>"+item+"</span>";
    }
  },

Bootstrap Typeahead Demo

I don't think the typeahead has an equivalent to delay, but there are some jquery workarounds for this.

edited May 16, 2013 at 17:02

answered May 15, 2013 at 19:59

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carol Skelly Over a year ago

As I've thought about this more, I realized that this answer will not suffice. Getting the typeahead to display "no matches" is a whole different problem and I'm not sure if Bootstrap typeahead.js will work. There may be a way through "matches" function.

Carol Skelly Over a year ago

I worked with it some more and edited my answer.. check out the demo again: bootply.com/61459

Arnaud Gourlay Over a year ago

thx you for the edit ;) I'll try to follow your lead as soon as possible.

Arnaud Gourlay · Accepted Answer · 2014-06-10 08:46:58Z

4

With the latest version of Typeahead.js (0.10) it is now possible to specify an empty template to display when no results are found.

   $('.typeahead').typeahead({
     hint: true,
     highlight: true,
     minLength: 2
    },{
      name: 'examples',
      source: examples.ttAdapter(),
      templates: {
        empty: [
          '<div class="empty-message">',
          'unable to find any results that match the current query',
          '</div>'
        ].join('\n')
      }
    });

answered Jun 10, 2014 at 8:46

Arnaud Gourlay

4,6661 gold badge32 silver badges35 bronze badges

Collectives™ on Stack Overflow

From Jquery-ui autocomplete to typeahead.js

2 Answers 2

Bootstrap Typeahead Demo

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related