jQuery UI自動完成不顯示AJAX結果

Question

我正在嘗試構建一個自動完成表單，該表單將在用戶輸入時從外部數據庫（返回JSON）加載JSON。 我的代碼似乎正常運行，因為它將記錄包含多個JSON對象的數組。 但是，jQuery UI不會在頁面本身上顯示結果。

的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tables</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>

    <div class="ui-widget">
        <input type="text" id="tags" />
    </div>

    <script src="assets/js/script.js"></script>
</body>
</html>

JS

$(document).ready(function(){
    function createUrl(input){
        var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
        return url;
    }

    function getSource(input){
        var input = input.term;
        var url = createUrl(input);

        $.getJSON(url, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            console.log(items); // Shows correct results

            return items;
        });     
    }

    $("#tags").autocomplete({
        minLength: 2,
        source: getSource
    });
});

可能是什么問題？ 謝謝。

Answer 1

嘗試：

 $("#tags").autocomplete({
        minLength: 2,
        source: function( request, response ) {
            $.getJSON("http://forums.zybez.net/runescape-2007-prices/api/"+request.term, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            console.log(items); // Shows correct results
            response(items);
        });     
      }
    });

參見： http : //jsfiddle.net/4g3818rr/

Answer 2

感謝Madalin的回答和OA的評論，我找到了解決方案：

function createUrl(input){
    var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
    return url;
}

$("#tags").autocomplete({
    minLength: 2,
    source: function( request, response ) {
        var term = this.term;
        var url = createUrl(term);

        $.getJSON(url, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            response(items);
        });     
    }
});

Answer 3

當您像這樣設置自動完成的來源時：

$("#btnArtist").autocomplete({ source: "/Ajax/Home/AutoCompleteData" });

您可以在控制台中查看從服務器返回的JSON數據，但不會顯示結果。

將URL更改為Ajax對象可以解決我的問題。 這是工作代碼：

$("#btnArtist").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Ajax/Home/AutoCompleteData",
            data: {
                term: request.term
            }
        }).done(function (data) {
            response(data);
        });
    }
})

jQuery UI自動完成不顯示AJAX結果

問題描述

3 個解決方案

解決方案1
2 已采納 2015-11-24 19:11:30

解決方案2
0 2015-11-24 19:34:42

解決方案3
0 2017-11-11 00:22:53

jQuery UI自動完成不顯示AJAX結果

問題描述

3 個解決方案

解決方案1 2 已采納 2015-11-24 19:11:30

解決方案2 0 2015-11-24 19:34:42

解決方案3 0 2017-11-11 00:22:53

解決方案1
2 已采納 2015-11-24 19:11:30

解決方案2
0 2015-11-24 19:34:42

解決方案3
0 2017-11-11 00:22:53