如何将Typeahead.js建议绑定到跨域数据源？
标题说明了一切。
我尝试在url上使用远程源（在另一个域上）并返回以下消息：
XMLHttpRequest cannot load http://www..../argument?callback=urlHandler. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.
相关守则
var films = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: {url: "http://www..../%QUERY?callback=urlHandler", ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'jsonp'}) } });
更新：似乎问题出在CORS问题上。 并且不尊重$.ajax设置对象的dataType设置为jsonp 。 以下评论有更多信息。
编辑：我找到了修复！ 现在的问题就是解释为什么会这样。
所以，当我将url更改为http://www....?callback=? 这实际上使它加载了GET调用的响应作为JSONP对象。 AJAX dataType和jsonp属性不应该涵盖这个吗？
这有点旧，但是自从提出这个问题以来，用Twitter Typeahead完成jsonp的方法发生了变化，这个答案在搜索“twitter typeahead jsonp”时成为最佳结果之一
对typeahead中传输设置的任何更改都应该通过Bloodhound构造函数中的prepare函数完成。
var search = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, // `states` is an array of state names defined in "The Basics" //local: states, remote: { url: 'http://www.myserver.com/my_search_endpoint/SearchTerm=%searchValue', prepare: function(query, settings) { settings.dataType = "jsonp" settings.url = settings.url.replace('%searchValue', query) return settings; } } });
prepare函数应该返回一个设置对象。 有关更多详细信息，请参见此处： https ： //github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote
您还需要确保在prepare函数中自己替换通配符值。
remote: { url: 'http://www.myserver.com/my_search_endpoint/SearchTerm=%searchValue', wildcard: '%searchValue' }
指定prepare后，将不再有效。
您可以使用XMLHttpRequest对象发出跨域请求。 这是使用称为“跨源资源共享”的东西完成的。 请参阅： http ： //en.wikipedia.org/wiki/Cross-origin_resource_sharing
非常简单地说，当向服务器发出请求时，服务器可以使用Access-Control-Allow-Origin标头进行响应，该标头将允许或拒绝该请求。 浏览器需要检查此标头，如果允许，则它将继续请求过程。 如果不是，浏览器将取消该请求。
您可以在此处找到更多信息和工作示例： http ： //www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html
JSONP是一种替代解决方案，但您可能会认为它有点像黑客。