Typeahead.js problem - offers not showing

Question

Here is my js code to execute typeahead:

jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('.search-field.input').typeahead({ name: 'group-static', prefetch: 'http://ws.luyencong.net/data/search/query.php?do=advanced', header: '<span class="group-title">General Content</span>', template: [ '<img class="icon" src="{{icon}}" style="width: 38px; height: 38px" />', '<div class="icon-desc"><span xmlns="http://www.w3.org/1999/xhtml" class="title">{{name}}</span>', '<span xmlns="http://www.w3.org/1999/xhtml" class="desc">{{description}}</span></div>', '<span class="clear"></span>' ].join(''), engine: Hogan }); }); 

Typeahead is executed (because I can see the tt-hint input and the wrapper of the sentence div) But there is a problem when I type in a character, the sentence does not appear as it should.

My JSON is located at: http://ws.luyencong.net/data/search/query.php?do=advanced

Please help me. Thanks.

Answer 1

This is not a type of ahead.js problem. The problem is that you are making a cross-domain request from luyencong.net to ws.luyencong.net . If you can, luyencong.net prefetch JSON file on luyencong.net - this is probably the easiest solution.

 jQuery('.search-field.input').typeahead({ // ... prefetch: 'http://luyencong.net/data/search/query.php?do=advanced' // ... }); 

If you cannot do this, there are other options:

• CORS
• Jsonp