Jquery UI автозаполнения - множественные источники

Question

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

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

Спасибо.

Answer 1

Возможно ли это сделать fom jquery side? Возможно, вам придется загружать и присоединяться к файлам «вручную».

Answer 2

Прежде всего, docs говорят, что «плагин Autocomplete ожидает, что эта строка укажет на ресурс 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 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. Наполнение автозаполнения

Если вы можете загрузить данные из вы можете использовать результат для заполнения автозаполнения. Я предлагаю вам изучить загруженные данные async с помощью 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); 
});