jquery自动完成没有被调用答案

【问题标题】：jquery autocomplete not being calledjquery自动完成没有被调用
【发布时间】：2014-07-21 15:57:46
【问题描述】：

请帮忙；以下代码不执行自动完成。

$(document).ready(function () {
    $('div.chapter a[href*="wikipedia"]').attr({
        rel: 'external',
        title: function () {
            return 'Learn more about ' + $(this).text()
            + ' at Wikipedia.';
        },
        id: function (index, oldValue) {
            return 'wikilink-' + index;
        }
    });

    $('<a href="#top">back to top</a>').insertAfter('div.chapter p');
    $('<a id="top"></a>').prependTo('body');

    $('#shakeButton').button({
        icons: { primary: 'ui-icon-pause' }
    });

    $('#shakeButton').click(function () {

        $('#shakeButton').effect('shake', {
            distance: 5,
            duration: 100
        });


    });

    $('#nameText').autocomplete({
        source: GetNames()
        //,minLength: 3
    });
});


function GetNames() {

    var availableTags = [];

    var params = {
        term: $('#nameText').val()
    };

    var request = $.ajax({
        url: "/Home/Autocomplete",
        type: "GET",
        contentType: "application/json",
        data: JSON.stringify(params)
    });

    request.done(function (data) {
       availableTags = data
       return availableTags;
    });


    //var availableTags = [
    //  "ActionScript",
    //  "AppleScript",
    //  "Asp",
    //  "BASIC",
    //  "C",
    //  "C++",
    //  "Clojure",
    //  "COBOL",
    //  "ColdFusion",
    //  "Erlang",
    //  "Fortran",
    //  "Groovy",
    //  "Haskell",
    //  "Java",
    //  "JavaScript",
    //  "Lisp",
    //  "Perl",
    //  "PHP",
    //  "Python",
    //  "Ruby",
    //  "Scala",
    //  "Scheme"
    //];
    //return availableTags;

}

【问题讨论】：

您能否通过 console.log(data) 确认您返回的 JSON 有效？！

标签： jquery ajax jquery-autocomplete

【解决方案1】：

GetNames() 方法不返回任何内容。

function GetNames() {

    // The function within request.done will be called when the request
    // is finished
    request.done(function (data) {
       availableTags = data
       return availableTags;
    });

    // But code-execution will go immediately to this position and exit
    // the function GetNames() without a return-value

}

JQuery-UI 的手册中有两个使用 JSON 获取数据的例子：Remote 和Remote JSONP（点击查看源代码）。

$( "#nameText" ).autocomplete({
  source: "/Home/Autocomplete",
});

【讨论】：

【解决方案2】：

你还没有描述你希望你的代码如何工作，所以我只是在这里猜测：

您的函数GetNames() 应该向/Home/Autocomplete 发出ajax 请求，并在获得结果时返回可用的标签。

你的问题是：

function GetNames() {
    // ...
    request.done(function (data) {
        availableTags = data
        return availableTags; // you're returning availableTags here
    });
    // You're expecting to get availableTags returned here
    // but nothing (undefined) is returned
}

这不能以典型的函数返回方式完成，因为 AJAX 就是这样工作的（异步 JavaScript 和 XML）

一个可能的解决方案：

$('#nameText').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/Autocomplete",
            dataType: "jsonp",
            data: {
                q: request.term
            },
            success: function (data) {
                response(data);
            }
        });
    },
    // ...
});

此示例复制自Autocomplete documentation。因此，也许下一次，您应该在此处询问之前查看文档以供参考，您可能会更快地得到答案。这适用于任何库/框架。

【讨论】：