jquery autocomplete list does not stick with parent input element
Solution 1
Here is a solution that does not involve any scripting and seems to do the trick.
Autocomplete, by default, appends the list to the body
of the document. If you insert the option to appendTo: "parent div that is fixed height"
and change the UI-css class for ui-autocomplete
from postion:fixed to position:relative, the list will follow the div scroll.
I think this is an easier solution to implement, though @Trevor's will also work.
see this updated fiddle: http://jsfiddle.net/NSm7f/3/
The key is adding this to your document or change the UI-css with:
.ui-autocomplete {
position: relative;
}
Solution 2
Best way is to give parent element the class ui-front and the ui-autocomplete takes care of it: https://api.jqueryui.com/autocomplete/#option-appendTo
Solution 3
Here is one option, you can also consolidate your autocomplete
call so you don't have to call it on each box individually:
var scrollPosition = -1;
$("[id^=box]").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx'],
open: function( event, ui ) {
scrollPosition = $('#Leftpanel').scrollTop();
},
close: function(event, ui ){
scrollPosition = -1;
}
});
$('#Leftpanel').scroll(function(){
if(scrollPosition != -1){
$('#Leftpanel').scrollTop(scrollPosition);
$('#Wrapper').focus();
}
});
Example
http://jsfiddle.net/trevordowdle/9m2Qg/
Example 2 (improved scrolling)
http://jsfiddle.net/trevordowdle/9m2Qg/3/
Only tested on google chrome.
Related videos on Youtube
user1837608
Updated on September 15, 2022Comments
-
user1837608 over 1 year
I'm having some difficulty adapting jqueryUI autocomplete to my site's CSS layout.
Whenever I call the autocomplete function onto an input field, the list opens as expected. Since the input lives within a div that is of fixed height, when the user scrolls that div, the autocomplete list stays fixed.
Has anyone encountered this and know of a workaround? This issue does not occur when the parent div is not fixed in height.
I've made a jsfiddle mockup here: http://jsfiddle.net/NSm7f/1/
here is my sample code:
<div class="root"> <div id="Header"> <div class='heading'>Test</div> </div> <div class='box' id="Wrapper"> <div class='box' id="Leftpanel"> <p>some text</p> <h1>Other stuff</h1> <br> <br>Autocomplete box: <input id="box1"> <p>some text</p> <h1>Other stuff</h1> <br> <br>Another autocomplete: <input id="box2"> <p>some text</p> <h1>Other stuff</h1> <br> <br> <p>some text</p> <h1>Other stuff</h1> <br> <br> <p>some text</p> <h1>Other stuff</h1> <br> <br> </div> <!--Leftpanel--> <div class='box' id="Rightpanel"> <form> <textarea rows="33" cols="45"></textarea> <br> </form> </div> <!--End rightpanel--> </div> <!--wrapper--> </div> <!--root-->
My JS (yes, I have jqueryUI and the default jqueryUI css loaded):
$("#box1").autocomplete({ source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx'] }); $("input#box2").autocomplete({ source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx'] });
and my css:
.box { float: left; } #root { max-width: 1200px; margin: 0 auto; } #Wrapper { width: 100%; display: table; } #Leftpanel, #Rightpanel { vertical-align: top; } #Leftpanel { width: 57%; display: table-cell; height:750px; color: #B29D72; overflow:scroll; background-color: #272F44; -moz-border-radius: 2px; border-radius: 5px; padding: 1%; margin:0.5% } #Rightpanel { width: 37%; display: table-cell; height: 750px; color: #B2A283; background-color: #0D162C; -moz-border-radius: 5px; border-radius: 5px; padding: 1%; margin:0.5% } #Sidebar { width: 15%; background-color: #B2A283; color: #0D162C; padding:1%; margin:0.5%; -moz-border-radius: 2px; border-radius: 5px; } #Sidebar a:link { color: #FFF4CB; } #Footer { width: 97%; height: auto; background-color: #B2A283; color: #0D162C; padding: 1%; margin: 0.5%; -moz-border-radius: 2px; border-radius: 5px; } #Footer a:link { color: #FFF4CB; padding-left: 5px; padding-right: 5px; } #Footer A:hover { color: #CA9221; } #Sidebar .slide-out-div { padding: 20px; width: 250px; background: #ccc; border: 1px solid #29216d; }
-
Trevor over 10 years@user1837608 please mark this answer as accepted if it answered your question or give feedback. Thanks
-
user1837608 over 10 yearsThanks, this solution does do the trick. One issue for me is that I have many inputs with different autocomplete values - so I would have to adapt the code to each instance, right?
-
user1837608 over 10 yearsI tried using the
appendTo
option onto my initial input, but that has no effect. Seems like that would be the ideal way to stick it! -
Trevor over 10 years@user1837608 I don't know that you would have to adapt the code to each instance.. If you can create another fiddle demonstrating the issue, if you are still having one I would be glad to look at it for you.