如何在引导输入中进行 ajax 调用

Question

这是我的 jquery 代码，用于从本地源设置引导字体

    $(function () {

    var src = [{ id: 1, name: 'Toronto', state: 'ON', country: 'Canada', key: 12345 },
                    { id: 2, name: 'Montreal', state: 'QC', country: 'Canada', key: 23456 },
                    { id: 3, name: 'New York', state: 'NY', country: 'USA', key: 34567 },
                    { id: 4, name: 'Buffalo', state: 'NY', country: 'USA', key: 45678 },
                    { id: 5, name: 'Boston', state: 'MA', country: 'USA', key: 56789 },
                    { id: 6, name: 'Columbus', state: 'OH', country: 'USA', key: 67890 },
                    { id: 7, name: 'Dallas', state: 'TX', country: 'USA', key: 78901 },
                    { id: 8, name: 'Vancouver', state: 'BC', country: 'Canada', key: 89102 },
                    { id: 9, name: 'Seattle', state: 'WA', country: 'USA', key: 90123 },
                    { id: 10, name: 'Los Angeles', state: 'CA', country: 'USA', key: 11234}];

    localStorage.setItem("cities", JSON.stringify(src));

    $('#search').typeahead({
        sources: [
        { name: "local", type: "localStorage", key: "cities" }
      ]
    });

});

它工作正常。 如何从服务器进行 ajax 调用并将如上所示的类似数据与源连接。

update: 这是 jsfiddle 上的上述工作代码http://jsfiddle.net/MMarW/

这是 jsfiddle 上没有触发 http://jsfiddle.net/FZP8a/3/ 的 ajax 代码

Answer 1

提供函数作为源：

$('#search').typeahead({
  source: function(query, process) {
    var searchUrl = YOUR_URL + '?q=' + encodeURIComponent(query);

    $.get(searchUrl)
    .success(function(data){
      //... do whatever you want...
      // ... and pass array to process function
      process(dataArray);
    })
    .error(function(){
      //...handle error
    });
  }
});

您也可以直接从源函数返回 dataArray。更多信息请参阅选项下的docs。

编辑：要请求 jsonp，请使用 jQuery.ajax：

$('#search').typeahead({
  source: function(query, process) {
    var searchUrl = YOUR_URL + '?q=' + encodeURIComponent(query);

    $.ajax(searchUrl, {
       dataType: 'jsonp',
       crossDomain: true // probably needed
    }).success(function(data){
      //... do whatever you want...
      // ... and pass array to process function
      process(dataArray);
    }).error(function(){
      //...handle error
    });
  }
});

在jQuery.ajax docs获取更多关于jsonp的信息

实际上 $.get 只是 $.ajax 的简写。