jQuery UI 自动完成不显示 AJAX 结果答案

【问题标题】：jQuery UI Autocomplete not showing AJAX resultsjQuery UI 自动完成不显示 AJAX 结果
【发布时间】：2015-11-24 19:02:09
【问题描述】：

我正在尝试构建一个自动完成表单，它将根据用户输入从外部数据库（返回 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>

$(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
    });
});

可能是什么问题？感谢您的问候。

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复
你在哪里调用这个函数getSource？
你的问题可能是你只在getJSON回调函数中返回结果，你的函数getSource没有返回任何东西......
@A.O.我在想类似的事情！我怎么能解决这样的问题？

标签： jquery json ajax jquery-ui

【解决方案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/

【讨论】：

那行不通。首先是因为 getSource 根本没有被触发，其次是因为我需要自动完成功能来触发 getSource 功能，而不是相反。
你想用这些数据来完成什么，这些数据是做什么用的？
我想为用户提供根据其输入从 API 检索到的建议数据。
是的，我试过这个。但是现在的问题是 url（应该基于用户的输入）没有设置。

【解决方案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);
        });     
    }
});

【讨论】：

【解决方案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);
        });
    }
})

【讨论】：