Question

我遇到一些jQuery的小问题：

function getQuickResults(terms) 
{ 
   var url = '/Search/PreviewSearch';

    $.ajax({
        type: "POST",
        url: url,
        data: { terms: terms },
        dataType: "json",
        error: function(xhr, status, error) {
            alert(error);
        },
        success: function(json) {

            $("#quickSearchResults").empty();

            for (var i = 0; i < json.length; i++) {
                var title = json[i].Title;

                $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                                        .children(":last")
                                        .append(json[i].Title)
                                        .append("<br />");
            }

            $("#quickSearchResults").children(":last").css({ 'border-bottom': 'none' });

            if (json.length > 0) {
                $("#quickSearchResults").show();
            }
            else {
                $("#quickSearchResults").hide();
            }
        }
    });
}

基本上这是我输入提示系统的ajax函数。在键盘上，它发送一个ajax请求进行搜索并返回一小部分值。

我想做的是，当用户点击结果中的某个跨度时，它会将该跨度复制到文本框中。所以我尝试了这个：

        $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                                .children(":last")
                                .append(json[i].Title)
                                .append("<br />")
                                .click(function(evt) {
                                    $("#searchBox").val(json[i].Title);    
                                });

但这不起作用。我尝试将变量赋给json [i] .Title并使用它，但它似乎总是返回最后一个结果的标题。我认为这可能是一个具有约束力的问题，但不知道是否有办法绕过它。

Answer 1

for (var i = 0; i < json.length; i++) {
    (function(i){
    var title = json[i].Title;

    $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                            .children(":last")
                            .append(json[i].Title)
                            .append("<br />");
    })(i);
}

您需要调用一个函数，以便i存储并绑定到函数而不是依赖于最后一个值，我认为这样的东西应该可以创建闭包。如果没有，请告诉我。

Answer 2

为什么重新发明轮子？ Jquery Autocomplete 似乎符合您的目的

如果没有，它肯定会让你了解如何做你想做的事情

Answer 3

我无论如何都不是jQuery大师，但这样的工作会不会起作用？

function setSearchBox()
{
    $("#searchBox").val($(this).data("title"))
}

然后在你的AJAX响应中......

$("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                        .children(":last")
                        .append(json[i].Title)
                        .append("<br />")
                        .data("title",json[i].Title)
                        .click(setSearchBox);

jQuery早期绑定函数可能吗？

3 个答案: