Как связать предложения Typeahead.js с перекрестным источником данных?

Question

Название говорит все.

Я попытался с помощью удаленного источника, на 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. И значениеобъекта данных объекта настроек, установленное на jsonp, не соблюдается. Комментарии ниже содержат больше информации.

EDIT: Я нашел исправление! Теперь возникает вопрос, почему это сработало.

Итак, когда я изменил URL-адрес на http://www....?callback=?, который фактически заставил его загрузить ответ GET-вызова как объекта JSONP. Не должны ли атрибуты AJAX dataType и jsonp?

Answer 1

Запросы перекрестных доменов можно выполнять с использованием объекта XMLHttpRequest. Это делается с использованием «Cross Origin Resource Sharing». См.: 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 является альтернативным решением, но можно утверждать, что это немного рубить.

Answer 2

Это своего рода старый, но метод реализации JSONP с использованием Twitter машинописный изменилось с тех пор этот вопрос был задан вопрос и этот ответ приходит как один из лучших результатов при поиске «щебет машинописный JSONP»

Любые изменения к настройкам транспорта в typeahead должно выполняться через функцию подготовки в конструкторе Bloodhound.

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; 
       } 
      } 
     }); 

Функция подготовки должна возвращать объект настроек. См. Здесь для получения более подробной информации: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

Вам также необходимо убедиться, что вы сами замените значение подстановки в функции подготовки.

   remote: { 
       url: 'http://www.myserver.com/my_search_endpoint/SearchTerm=%searchValue', 
       wildcard: '%searchValue' 
      } 

больше не будет работать после того, как вы укажете подготовку.