CODEWITHSUNDEEP
javascriptphpbootstrap-typeahead
Guillaume Bois
Guillaume Bois

Reputation: 1331

bootstrap typeahead show no results

I am trying to use typeahead for my email field, so when admins search for an email address, options are shown to them. Pretty basic. My source is loaded from a php BE which collects its data from mysql.

So I have an input tag:

<input type="text" name="userEmail" id="email" value="" class="form-control" />

In my document ready function I have:

$('#email').typeahead({
    ajax: {
        triggerLength: 3,
        url: '/user/findBootstrap'
    },
    display: 'email'
});

And when I type :"gbo" my php BE returns a json similar to this:

[{"id":"94","email":"[email protected]"},{"id":"142","email":"[email protected]"},{"id":"193","email":"[email protected]"}]

I confirm I receive data by lookintg at the console. Typeahead just wont show any options, what ever I type. The lib is loading fine (Status 200) and I get no JS errors

Upvotes: 2

Views: 688

Answers (1)

Guillaume Bois
Guillaume Bois

Reputation: 1331

I found the problem. I just download this today, see post date. Contrary to what is specified on the documentation page the parameter to change the name of the parameter you are looking for is not "display" but "displayField".

They are probably out of sync with their documentation...

Hope this post will help others to not lose their time with this...

So here is the correct syntax that should have been used in my case:

$('#email').typeahead({
    ajax: {
        triggerLength: 3,
        url: '/user/findBootstrap'
    },
    displayField: 'email' // NOT "display"!!!!!
});

Upvotes: 2

Related Questions