CODEWITHSUNDEEP
jquerycssjquery-uiautocompletescroll
user1837608
user1837608

Reputation: 960

jquery autocomplete list does not stick with parent input element

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;
}

Upvotes: 11

Views: 16554

Answers (6)

King Julian
King Julian

Reputation: 157

I had the same issue because my fields are in a table. I fixed it like that

let input = $('.autocomplete');

input.autocomplete({
  appendTo: input.parents().eq(0),
});

Upvotes: 1

zoran
zoran

Reputation: 865

I also had same problem on project that I am working on, but instead of solution with appendTo that is mentioned in some other answers I decided to implement autocomplete the same way native combobox works. If parent div is scrolled, menu on autocomplete is closed. I achived this by adding onscroll event listener to parent div that closes menu (https://api.jqueryui.com/autocomplete/#method-close).

I choose this solution because if autocomplete is appended to parent div instead of body, and if it positioned in the lower part of div, sometimes scrollbar appears when menu on autocomplete is opened.

Upvotes: 0

Sareesh Krishnan
Sareesh Krishnan

Reputation: 720

Auto complete will append to the 'body' of the document by default. So you use jQuery appendTo to append auto-complete to your parent div instead.

Try this.

$("#textboxId").autocomplete({
   appendTo: "#parentId",   
});

Upvotes: 0

yar1
yar1

Reputation: 1351

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

Upvotes: 5

user1837608
user1837608

Reputation: 960

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;
}

Upvotes: 12

Trevor
Trevor

Reputation: 16116

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.

Upvotes: 1

Related Questions