Question

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

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

}

Answer 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",
});

Answer 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复制的。所以也许下次，你应该先查看文档以供参考，然后在这里询问，你可能会更快地得到答案。这适用于任何库/框架。

jquery自动完成未被调用

2 个答案: