jQuery用戶界面自動完成 - 多源

0

它甚至有可能做到這一點的jQuery的一面？可能是你必須加載和「手動」加入文件。

2010-10-25 20:36:59 joni

+0

我已經用1個xml文件做它爲什麼我不能再發出第二個請求？我知道我可以請求所有文檔，然後將它們解析在一起，然後將其傳遞給jquery，但是額外的步驟會像浪費時間一樣接縫。我寧願只做2個獨立的源請求。 – specked 2010-10-25 20:40:15

+0

可能是jQuery _has_實現了使用2個文件作爲源的功能，或者可能是_not_。據我所知，它沒有這個功能，所以你必須自己做。另一種方法是在服務器端，你不能只加入文件嗎？ – joni 2010-10-25 20:43:49

1

首先，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 });

來源

2010-10-25 20:50:13

0

我可能可以通過編寫自定義源功能：

$("#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

來源

2010-10-25 20:51:59 Milo

+0

@Larry K：xml可以被解析爲可用於「respone（）」的對象數組。每個對象都有一個id，value，label和both屬性。 – Milo 2010-10-25 20:56:24

+0

@Larry K：如果來源不是靜態的，你的解決方案可以工作，但可能不是一個有效的解決方案。 – Milo 2010-10-25 21:01:21

+0

OP通過一個url使用靜態源代碼。 – 2010-10-25 21:29:20

0

我想如果你能夠從加載數據的任務分成

數據的檢索
填充自動完成

多個來源並統一它們，您可以使用結果來填充自動完成控件。我建議你看看使用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); 
});

來源

2014-03-24 12:22:45 Techek

jQuery用戶界面自動完成 - 多源

回答

相關問題