Twitter Bootstrap Typeahead with JSON REST

Question

I am having trouble implementing the Twitter Bootstrap Typeahead feature with a JSON web Service.

I have looked at all the examples on this website and can't find anything that will work. I know my JSON web service works; I can enter the address in my browser and it returns the JSON I expect with the MIME type set to "application/json".

I have this JavaScript in the

<body>

of my HTML page:

<script>
    $('#typeahead').typeahead({
        source: function (query, process) {
            return $.getJSON(
                'http://localhost:8732/IngredientsService/search/',
                { query: query },
                function (data) {
                    return process(data);
                });
        }
    });
</script>

I have this code as my "input":

<input type='text' id='typeahead' class='typeahead' data-provide="typeahead" data-items="10" />

Can anyone explain why this is not working?

What do you mean by not working? Are you getting any error in the console? Do you see any activity in the network? — Subir Kumar Sao, May 23 '13 at 09:38
Sorry, my description wasn't very helpful. The error is: nothing happens. I don't see any error messages in the console (Firebug). How do I check to see if there is any activity on the network? — David Poxon, May 23 '13 at 10:54
what does it say, of you add `console.log(data)` as the very first line in `function(data)` ? — davidkonrad, May 23 '13 at 11:05
I used Chrome to and viewed the 'Network' tab on the Developer tools... and it appears that the Web Service is not being accessed. The URI works, so I'm not sure why this would be the case. — David Poxon, May 23 '13 at 11:34
Is the domain of the application same as the domain of the service? You should get some error in the chrome console. — Subir Kumar Sao, May 23 '13 at 11:47
They are on the same network. There is no error in the console. I feel like the Service is not being accessed. My console (in Chrome) is enabled. — David Poxon, May 26 '13 at 13:57

score 3 · Accepted Answer · answered May 23 '13 at 11:43

3

According to the last comment ("web service not being accessed") - have you tried the more normal / documented approach?

$('#typeahead').typeahead({
  source: function (query, process) {
     return $.get('http://localhost:8732/IngredientsService/search/', { query: query }, function (data) {
       return process(data.options); //if JSON is [ "options" : { ...} 
     });
  }
});

$.getJSON is not nessecary, but useful when you want to load an entire JSON and inject potion of it as a source for the typeahead

$.getJSON("http://localhost:8732/IngredientsService/search/", function(json) {
  $("#typeahead").typeahead({
    source : json.options //again, dont know the structure of the JSON
  });
});

answered May 23 '13 at 11:43

davidkonrad

83,997
17
205
265

No this hasn't worked. Does the Service URL expect a parameter? I.e. should I be mapping my Service method to a value form the URL? – David Poxon May 26 '13 at 13:56
1

I guess your index / calling script is not http://localhost:8732/ ?? It may be the [link](http://en.wikipedia.org/wiki/Same_origin_policy) Same Origin Policy that is your problem. – davidkonrad May 26 '13 at 15:58
Is there a way of resolving issue? – David Poxon May 27 '13 at 04:26
Yes, use a [proxy](http://stackoverflow.com/a/16495740/1407478) or try [JSONP](http://stackoverflow.com/a/2686406/1407478) – davidkonrad May 27 '13 at 10:23

score 0 · Answer 2 · answered May 23 '13 at 12:01

0

From what I can see from the typeahead documentation, the source key in the parameters object is not valid.

It should look more like this I think:

 $('#typeahead').typeahead({
     remote: 'http://localhost:8732/IngredientsService/search/q=%QUERY' 
 });

http://jsfiddle.net/qVjsu/

answered May 23 '13 at 12:01

Anthony Truskinger

628
6
19

Source is an option used. I tried to use the above but with no luck. :( – David Poxon May 26 '13 at 13:50

score 0 · Answer 3 · answered Jul 19 '13 at 11:36

It's better to omit return when using async sources because process() will be triggered twice

$('#typeahead').typeahead({
    source: function (query, process) {
        $.getJSON('/search/json/'+ query), function (data) {
            return process(data);
        });
    },
    minLength: 1,
    items: 8
});

Twitter Bootstrap Typeahead with JSON REST

3 Answers3