Friday, October 22, 2010

Adding scrollbars to jquery autocomplete combobox

If your select source is very long and exceeds your desired height you can use height to control the height of your controls.
.ui-autocomplete { height200pxoverflow-yauto; }
This will do the job.

To set the width of a jquery autocomplete combobox

You can use the javascript or css methods to set the width of jquery autocomplete combobox
If you want to use css, use this code
.ui-autocomplete-input { width:100px; }
or if you want to set this to a specific combobox use this css
.title .ui-autocomplete-input { width: 100px; }
 
If you want to use javascript try this code.
$('.ui-autocomplete-input').css("width""100px");

jQuery UI autocomplete combobox reloads page when dropdown button is pressed

If you are new to jquery UI, and have used a lot of time trying to figure out autocomplete combobox.
There are some scenarios when you click the dropdown button the page reloads. It only happens when you put your select control inside of a form tag.
To get rid of this problem use the following code.
Add return false at the end of click event.

.click(function () {
        // close if already visible
        if (input.autocomplete("widget").is(":visible")) {
            input.autocomplete("close");
            return;
        }
        // pass empty string as value to search for, displaying all results
        input.autocomplete("search""");
        input.focus();
        return false;
    });