Question

我在页面上有几个输入框，所有输入框都有自动完成类，在每个输入框下面我都有一个div，我想要自动完成结果附加到。但是，如果我只是说要附加到一个类的div，那么它只是执行第一个div而不是最接近的div。我试图整理一些javascript来解决这个问题，但我遇到了一堵砖墙，并且一直遇到同样的错误。可以提供任何帮助。

这是我的javascript：

<script type="text/javascript">
$(document).ready(function () {
    var div_id;
    $("input.autocomplete").autocomplete({
        set: div_id = $(".autocomplete").keyup(function () {
            $('.autocomplete').closest('div').find('.container').attr('id');
        }),
        appendTo: div_id,
        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>

以下是视图的内容：

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

我尝试启动项目时遇到的错误是“Microsoft JScript运行时错误：对方法或属性访问的意外调用”。当我收到此错误时，它会在我的jquery.min.js（1.8.3）中突出显示：

this.appendChild(e)

Answer 1

更改此行

$('.autocomplete').closest('div').find('.container').attr('id');

要

$('.autocomplete').next("div").attr("id"));

应该是好的。

Answer 2

试试这个：

<强> HTML

将data container id添加到input box

Employee Name (Sponsor): 
<input type ="text" name="sponsor" data-container_id="container2" class="autocomplete" />
<div class ="container" id = "container2"></div>

现在在脚本

$("input.autocomplete").autocomplete({
    appendTo: $('#'+$(this).data('container_id')),//it will give you container-id
    ....
    ....

使用jQuery自动完成功能附加到类的最近div

2 个答案: