一千萬個為什麽

搜索

jQuery UI自動完成 - 輸入與結果集不匹配時未顯示結果

問題的簡短版本

當輸入字符串與結果字符串匹配時,自動完成功能正常,但不是。數據已成功從JSON中檢索出來。

更長的版本

我想用JSON數據動態編輯自動完成的源內容。

當搜索字符串與first_name和last_name字段匹配時,以下方法有效。

但是JSON url返回的更多,例如通過搜索用戶名,它仍然返回正確的數據。但這並沒有在自動完成中顯示,我的理論是自動完成UI強制“輸入值”與“結果值”相同。

JSON數據返回:

[
        {"pk": 1012912, "fields": {"first_name": "Barack", "last_name": "Obama"}}, 
        {"pk": 1017519, "fields": {"first_name": "George", "last_name": "Bush"}}
]

自動填充代碼

如您所見,結果集由搜索功能設置。


$('#search').autocomplete({
    source: [],
    search: function(event, ui){
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data){
            for (var i=0; i

如果我在#search領域搜索'Barack Obama',我會得到我的結果,沒問題。 但是,如果說Barack Obama有用戶名“baracko”並且我搜索他的用戶名,那麽我從JSON和結果數組中獲得正確的結果(我用console.log檢查了這一點),但結果沒有顯示。

任何人都知道為什麽?

未來googlers或那些感興趣的解決方案

感謝ek_ny提供的一些提示,這是我的新JSON:

[{ 'value' : 'Barack Obama'}, { 'value' : 'George Bush'}]

這是代碼:

$('#search').autocomplete({
    source: function(req, res){
        jQuery.getJSON('http://jsondata.com/?query='+req.term, req, function(data){  
            var results = [];
            $.each(data, function(i, val){
                results.push(val.value)
            });
            //Add results to callback       
            res(results);
        });           
    },
});

最佳答案

我不知道這是否有幫助,但我設置的自動填充程序有點不同。我使用source屬性,它允許我控制回調到jQuery。我的ajax調用以[{“id”:1,“label”:“Annie Hall”,.....]的形式返回項目。您可以根據需要修改Ajax調用的結果,具體取決於數據從服務器返回的方式。這是我用來調用它的代碼。

        $("#movieSearch").autocomplete({
            source: function(req, res){
                $.getJSON(
                    "search.aspx",
                    {term : req.term},
                    function(data){
                        res(data);//you can also modify your results before you call res()
                    }
                );
            }
);

在你的例子中讓我煩惱的一件事是變量結果,這在我看來是一個全局變量。我們都知道(用Douglas Crockford的話來說)全局變量是邪惡的。

轉載註明原文: jQuery UI自動完成 - 輸入與結果集不匹配時未顯示結果