O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the default input with themes

The default autocomplete implementation doesn't change anything visual about the input element. Functionally speaking, we don't want the input element changed. All we need is the drop-down component once the user starts typing. But let's see if we can go ahead and change the virtual appearance of the autocomplete input element using components from the widget framework and the theme framework.

Getting ready

We'll use the following markup for our example, a simple label element and a simple input element:

<div>
    <label for="autocomplete">Items: </label>
    <input id="autocomplete"/>
</div>

How to do it...

We'll use the following code to extend the autocomplete widget with the CSS classes from the theme framework we'd ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required