JQuery UI автозаполнение - несколько источников

Question

Для 1 источника это правильный код после вызова ajax: URL: "links2.xml",

Я бы хотел, чтобы источником было несколько XML-файлов. Как включить дополнительные пути?

Спасибо.

Answer 1

Прежде всего, документы говорят, что «плагин автозаполнения ожидает, что эта строка будет указывать на ресурс URL, который будет возвращать данные JSON». Примечание: 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 2

Я бы разделил задачу на

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

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? Возможно, вам придется загружать и объединять файлы «вручную».