javascript - Appending to the nearest div of a class using jQuery autocomplete

Question

I have several input boxes on a page, all with the autocomplete class, underneath each of them I have a div that I want the autocomplete results to append to. However, if I just say to append to the div of a class then it just does the first div and not to the one closest. I've tried to put together some javascript to fix this, but I've run into a brick wall and keep getting the same error. Any help that can be provided is appreciated.

Here is my 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>

Here is what the view looks like:

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/>

And the error I get when I try to start the project is "Microsoft JScript runtime error: Unexpected call to method or property access." When I get this error it highlights this in my 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
    ....
    ....