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的回答和O.A.的评论，我找到了解决方案：

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 Autocomplete未显示AJAX结果

3 个答案: