jQuery用户界面自动完成 - 多源

Question

对于1种源，这是Ajax调用后正确的代码： 网址：“links2.xml”，

我希望源是多个XML文件。我如何包含额外的路径？

谢谢。

Answer 1

它甚至有可能做到这一点的jQuery的一面？可能是你必须加载和“手动”加入文件。

Answer 2

首先，docs表示“自动填充插件期望该字符串指向将返回JSON数据的URL资源。” 注意：JSON，而不是XML所以你需要在下面将你的xml转换成json。

xml to json可以在您的服务器上或客户端浏览器上完成。如果可能的话，在服务器上执行一次操作会更快。

要使用多个源文件，您需要首先在HTML/JS页面中加载多个文件。然后将它们连接在一起成为一个Javascript数组，然后将该数组提供给自动完成调用。

喜欢的东西：

<script> 
    myproject_choices = []; // global var. Hence prefix with project name. 

    var cb = function(data){jQuery.merge(myproject_choices, data);}; // callback for ajax 

    $.getJSON('ajax/choices1.json', cb); // fetch and concatenate the choices 
    $.getJSON('ajax/choices2.json', cb); 
    $.getJSON('ajax/choices3.json', cb); 
</script> 

# later... 
$(".selector").autocomplete({source: myproject_choices }); 

Answer 3

我可能可以通过编写自定义源功能：

$("#elm").autocomplete({ source: function(request, response) { 
$.ajax({ 
    url: "links1.xml", 
    success: function(data) 
    { 
      // store data here 
      $.ajax({ 
       url: "links2.xml", 
       success: function(data) 
       { 
        // combine data from first call with this call 
        response(combineddata); 
       } 
      } 
    }); 
}.... 

但我你能文件在其他一些结合点可能是优选的。

的Xml与自动完成：http://jqueryui.com/demos/autocomplete/#xml

Answer 4

我想如果你能够从加载数据的任务分成

1. 数据的检索
2. 填充自动完成

多个来源并统一它们，您可以使用结果来填充自动完成控件。我建议你看看使用jQuery Deferred-objects（api.jquery.com/jQuery.Deferred）加载数据异步，并等待所有调用返回并使用结果使用$.when(...).then(...)

以下示例来自编写良好的相当好地解释了网站：http://www.danieldemmel.me/blog/2013/03/22/an-introduction-to-jquery-deferred-slash-promise/

 
function getReady() { 
    var deferredReady = $.Deferred(); 
    $(document).ready(function() { 
    deferredReady.resolve(); 
    }); 
    return deferredReady.promise(); 
} 

var firstRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/file/xhr2/' }); 
var secondRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/audio/scheduling/' }); 

$.when(getReady(), firstRequest, secondRequest 
).done(function(readyResponse, firstResponse, secondResponse) { 
    var insertDiv1 = $('<div></div>'); 
    insertDiv1.html($(firstResponse[0]).find('section').html()); 
    var insertDiv2 = $('<div></div>'); 
    insertDiv2.html($(secondResponse[0]).find('section').html()); 
    $('body').append(insertDiv1, '<hr/>', insertDiv2); 
});