Bootstrap Typeahead only displaying first letter

Question

I'm having a tough time getting Twitter Bootstrap's Typeahead to work. Typeahead is only matching the first letter of an input. My results in the typeahead box looks something like

n
n
n
N
N
n.

My code is

<%= text_field_tag :search, params[:search], "data-provide" => "typeahead", "data-source" => '["USA", "Canada","Mexico"]' %>

Can anyone help?

Answer 1

Check the combination of quotes that's output in your html for the data-source attribute. I was having the same problem with the following snippet of code.

<input type="text" name="test" id="test" class="span2" data-provide="typeahead" 
data-items="4" data-source="['thisone','another','zzzz']">

changing to the following, which I've seen in other examples, didn't fix it

data-source="["thisone","another","zzzz"]"

but switching to single quotes around the attribute value and double-quotes for the searchable elements fixed it. This works.

data-source='["thisone","another","zzzz"]'

Answer 2

For anyone who is getting this problem when using a source function (i.e. ajax call to your server):

use:

process(JSON.parse(data));

instead of:

process(data);

Answer 3

I just tried your code, and it worked for me. When I changed the quotes to be like this though, I was getting the issue you're having:

"['USA', 'Canada','Mexico']"

I was running into a similar problem, it's slightly different than your issue, but it might help others. What was happening to me is that the JSON I was passing to typeahead was being interpreted as a character array. So if I passed in:

["USA", "Canada","Mexico"]

It would interpret it as an array of 26 characters, thus the results typeahead was giving me were single characters.

In my case, it was because I was making an ajax call and I didn't set the dataType to 'json'. In your case that isn't the problem, but hopefully this gets you moving towards a solution!

Answer 4

var data = "";
$.ajax({
        url: 'ajax/getdirverandpass.php',
        success: function (result) {
            data = JSON.parse(result);
        },
        async: false
});

 $("#nav-search-input").typeahead({source: data, updater: function (a) {
            $("#nav-search-input").focus();
            return a
}});

please use this JSON.parse(result);