jQuery Autocomplete Scrollable Dropdown

Question

I am working with a jQuery autocomplete textbox. My code and script are working fine, but now I need a 'scrollable dropdown(along X and Y axis)' instead of a plain dropdown list.

Script used to facilitate autocomplete dropdown:

$(function () {
    $("#TextBox").autocomplete({
        source: "home/search",
        dataType: 'json',
        minLength: 1,
        // max: 10,
        // scroll:true
    });
});

Solution 1

You can set the x and/or y axis to scrollable, but it's not done through the autocomplete script, it's done through the autocomplete style. The script is not responsible for how elements are displayed, only how they interact. The particular style you're looking to change is the ui-autocomplete class.

Let's say that you want an at-most 200px high and 250px wide drop down (which allows it to be smaller if there are not enough results to fill it all). Then you would add this to your CSS:

.ui-autocomplete { 
    /* these sets the height and width */
    max-height:200px; 
    max-width: 236px; 

    /* these make it scroll for anything outside */
    overflow-x:scroll;
    overflow-y:scroll;
}

If you want to change the size, simply change the sizes above. If you want to make the x axis not scrollable, but keep the y, then you would change it to:

.ui-autocomplete { 
    /* same as above */
    max-height:200px; 
    max-width: 236px; 

    /* note that x is hidden now */
    overflow-x:hidden;
    overflow-y:scroll;
}  

You can read more on the jQuery UI autocomplete site. I've linked to the "Scrollable results" section on the right, and you can click 'view source' to see a full example. They make a good note that IE does not support max-height, so you'll have to set just a height for IE support.

Solution 2

If anyone stuck with same problem (wants autoComplete with vertical scroll) use this:

.ui-autocomplete 
{
  height: 200px;
  overflow-y: auto;
}