Question

对于1个源，这是ajax调用后的正确代码： url：“links2.xml”，

我希望源代码是多个xml文件。如何包含额外路径？

感谢。

Answer 1

首先，docs表示“Autocomplete插件希望该字符串指向将返回JSON数据的URL资源。” 注意：JSON，而不是XML ，因此您需要在下面将xml转换为json。

xml到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 2

甚至可以从jquery那边做这个吗？您可能需要“手动”加载和加入文件。

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

我会把任务分成

检索数据
填充自动填充

如果您能够从多个来源加载数据并统一它们，则可以使用结果填充自动完成控件。我建议您研究使用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);
});

Jquery ui自动完成 - 多个来源

4 个答案: