Добавление к ближайшему div класса с использованием jQuery autocomplete

Question

У меня есть несколько полей ввода на странице, все с классом автозаполнения, под каждым из них у меня есть 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> 

Сейчас в Script

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