Question

我有一个使用jQuery自动完成功能的Web应用程序。在我的网页上，我有几个文本框，其中附加了自动完成类，并在其下方显示空白div，以便附加自动完成结果。目前，无论我输入哪个文本框，它都会附加到第一个文本框下的div。如何将它附加到我正在输入的框下面的那个？

jQuery代码：

<script type="text/javascript">
$(document).ready(function () {
$("input.autocomplete").autocomplete({
    appendTo: '.container',
    source: function (request, response) {
        $.ajax({
            url: '/Home/GetUsers',
            type: "POST",
            dataType: "json",
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }));
            }
        })  ;
    }
});
})
</script>

HTML（总共有18个文本框，但我觉得这足以显示我在做什么）：

Employee Name (Team Leader): <input type ="text" name="empName1" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name (Event Process Owner): <input type ="text" name="empName2" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name (Sponsor): <input type ="text" name="sponsor" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name: <input type ="text" name="empName3" class="autocomplete"/>
    <div class ="container"></div>
    Employee Name: <input type ="text" name="empName4" class="autocomplete"/>
    <div class ="container"></div>

Answer 1

工作演示：http://jsfiddle.net/mohammadAdil/muwxt/

$('input').each(function () {
    $(this).autocomplete({
        search: function (event, ui) {
            $(this).next('.container').empty();
        },
        source: function (request, response) {
            $.ajax({
                 url: '/Home/GetUsers',
                 type: "POST",
                 dataType: "json",
                 data: { query: request.term },
                 success: function (data) {
                       response($.map(data, function (item) {
                            return { label: item, value: item };
                         })
                       );
                 }  
            });
        }
    }).data('autocomplete')._renderItem = function (ul, item) {

        return $('<li/>')
            .data('item.autocomplete', item)
            .append(item.value)
            .appendTo($(this.element).next('.container'));
    };
});

Answer 2

我不知道你是否可以改变HTML，但这可行：

HTML（第一个自动填充框）

Employee Name (Team Leader): <input type ="text" name="empName1" class="autocomplete"/>
<div class ="empName1 container"></div>

JS

$("input.autocomplete").autocomplete({
    appendTo: '.container.' + $(this).attr('name'),

您还应该将此添加到您的ajax调用中：

error: function() { response(""); }

因为，正如自动填充API文档中所说的那样

即使您遇到响应，也必须始终调用响应回调错误。这可确保窗口小部件始终具有正确的状态。

Answer 3

我认为我的解决方案会减慢负载，但工作（我希望）。

首先添加所有.container个ID，但不要删除该类。

然后使用每个：

$('.autocomplet').each(function(){
    var target = $(this)
    target.autocomplete({
        appendTo: getcontainer(target),
        source: function (request, response) {
        $.ajax({
            url: '/Home/GetUsers',
            type: "POST",
            dataType: "json",
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }));
            }
        })  ;
    }
})

为了不丢失目标的引用，我们将其保存在var中。仅附加接受选择器，因此我们创建一个将返回选择器的函数：

function getContainer(target){
    var selectedID = target.next('.container').attr('id');
    return '#'+selectedID;
}

Answer 4

在ajax调用的成功函数中，您可以使用jquery模板（google jquery.tmpl）将html附加到某些div，考虑到发件人决定去哪个div ..我自己有这个问题，这个解决方案工作正常。

Answer 5

自动填充结果附加在正确的div中。只是将textfield和div包装在一起。： DEMO

JQuery：稍微修改了jquery部分，如下所示 -

$(document).ready(function () {

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

try{

    $(".autocomplete").each(function(){
        $(this).autocomplete({
search: function (event, ui) {
        $(this).parent().find('.container').empty();
    },
source: availableTags,
}).data('autocomplete')._renderItem = function(div, item) {

return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
.appendTo($(':focus').parent().find('.container'));
};
})
}
catch(e){alert(e)}  })

Answer 6

我认为问题出在appendTo选项上。请尝试以下

$(document).ready(function () {
    $("input.autocomplete").each(function () {
        var $this = $(this),
            name = $this.attr('name');
        $this.autocomplete({
            appendTo: 'input[name=' + name + '] + .container',
            source: function (request, response) {
                $.ajax({
                    url: '/Home/GetUsers',
                    type: "POST",
                    dataType: "json",
                    data: { query: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item, value: item };
                        }));
                    }
                });
            }
        });
    });
});

在jQuery中附加到类的最近div

6 个答案: