ajax, php and twitter's bootstrap typeahead

Question

Alright so I am trying to populate the typeahead of twitter's bootstrap and I followed this answer: Twitter bootstrap Typeahead to populate hrefs

But I keep getting:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined edit-group?id=14:239 $.typeahead.matcher edit-group?id=14:239

Here is the code for it:

matcher: function (obj) {
    var item = JSON.parse(obj);
    return ~item.title.toLowerCase().indexOf(this.query.toLowerCase())
},

I looked into the network tab to see if get the correct data and I get this:

0: {title:The1Prodigy1, href:1}
href: 1
title: "The1Prodigy1"
1: {title:test_suspend_user, href:4}
href: 4
title: "test_suspend_user"
    2: {title:test_ban_user, href:5}
3: {title:test_delete_user, href:6}
4: {title:user_test_edit, href:7}

One last question, do I need the href? Because, all I want to do is help the user type the correct username. I don't want it to be linked to another page or anything. It is for a form...

EDIT: I added an alert of item.title and it sends back undefined... Why is that?

Thanks, Ara

Answer 1

If the items in your Typeahead source are objects, you are going to have to jump through some hoops. Otherwise, you will get that error as Bootstrap Typeahead tries to internally call toLowerCase() to compare items, sort items, etc.

I published a blog post not long ago on how to do this: http://victorblog.com/2013/06/21/how-to-use-rich-objects-and-typed-objects-with-bootstrap-typeahead/

I am sure you simply haven't overridden the updater function for Typeahead.