Note that there are some explanatory texts on larger screens.

plurals
  1. POAppending to closest div of a class in jQuery
    primarykey
    data
    text
    <p>I have a web application that uses the jQuery autocomplete function. On my webpage I have several text boxes with the autocomplete class attached to them and beneath them empty divs for the autocomplete results to append to. Currently, no matter which text box I type in, it appends to the div under the first text box. How would I get it to append to the one below the box I'm typing in?</p> <p>jQuery code: </p> <pre><code>&lt;script type="text/javascript"&gt; $(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 }; })); } }) ; } }); }) &lt;/script&gt; </code></pre> <p>HTML (there are 18 textboxes total, but I felt this would be enough to show what I was doing):</p> <pre><code>Employee Name (Team Leader): &lt;input type ="text" name="empName1" class="autocomplete"/&gt; &lt;div class ="container"&gt;&lt;/div&gt; &lt;br/&gt; &lt;br/&gt; Employee Name (Event Process Owner): &lt;input type ="text" name="empName2" class="autocomplete"/&gt; &lt;div class ="container"&gt;&lt;/div&gt; &lt;br/&gt; &lt;br/&gt; Employee Name (Sponsor): &lt;input type ="text" name="sponsor" class="autocomplete"/&gt; &lt;div class ="container"&gt;&lt;/div&gt; &lt;br/&gt; &lt;br/&gt; Employee Name: &lt;input type ="text" name="empName3" class="autocomplete"/&gt; &lt;div class ="container"&gt;&lt;/div&gt; Employee Name: &lt;input type ="text" name="empName4" class="autocomplete"/&gt; &lt;div class ="container"&gt;&lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload