jQuery UI Autocomplete - style like a standard <SELECT>

Posted by jkohlhepp on Stack Overflow See other posts from Stack Overflow or by jkohlhepp
Published on 2010-03-31T15:06:50Z Indexed on 2010/03/31 15:13 UTC
Read the original article Hit count: 660

Filed under:

jquery-ui

|

autocomplete

I'm on the verge of starting a new web application that is likely to have need for both standard, simple dropdowns as well as more feature-rich autocomplete controls for longer lists of values, better type ahead behavior, etc. I'm planning on using the jQuery UI Autocomplete widget along with some combobox behavior as detailed here:
http://jqueryui.com/demos/autocomplete/#combobox

My concern is that "out of the box" the Autocomplete widget looks very different than a standard control. Since is not easy to skin/style, I'm hoping to adjust the Autocomplete to look & feel as close to the as possible, except in the cases where the increased functionality justifies a different L&F.

What is the best way to go about reskinning the Autocomplete to look more like a ? Has this already been done somewhere? Should I use jQuery UI theming? Other options?

© Stack Overflow or respective owner

Related posts about jquery-ui

jquery.ui.draggable.js and jquery.ui.widget.js conflict

as seen on Stack Overflow - Search for 'Stack Overflow'
hello I had a working application, which uses a jquery ui dialog. I wanted to make the dialog draggable. As far as I know the only thing needed is the jquery.ui.draggable.js script. So I added it to the scripts I am using, but know I get the following error (as shown in the firebug console): base… >>> More
Use JQuery UI Datepicker with Icons from Jquery UI Theme

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a datepicker control setup using the JQuery UI, I am also using the JQuery UI themes which provide a bunch of default icons that I want to use. The DatePicker allows for specifying a specific image, i.e.: <script type="text/javascript"> $(document).ready(function() { $("#DateFrom")… >>> More
JQuery UI function errors out: Object is not a property or method

as seen on Stack Overflow - Search for 'Stack Overflow'
In the following code I get an error that says autocomplete function Object is not a property or method Here is the code: <title><%= ViewData["pagetitle"] + " | " + config.Sitename.ToString() %></title> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery… >>> More
Strange jQueryUI dialog error

as seen on Stack Overflow - Search for 'Stack Overflow'
I have dialog created like this $('#add_error').click(function(e) { $('<div>') .load('/someaction/format/html/') .dialog({ title: 'Some title', modal: true, width: 385, close: function() { … >>> More
JavaScript : jQuery UI 1.8 est disponible avec 5 nouveaux plug-ins, 1 nouvel effet et des centaines

as seen on Developper.com - Search for 'Developper.com'
jQuery UI 1.8 est disponible L'équipe de jQuery UI annonce la sortie de jQuery UI 1.8, cette version apporte 5 nouveaux plug-ins, 1 nouvel effet, et des centaines de corrections de bogues et d'améliorations. Pour une liste complète de tous les changements entre jQuery UI 1.7.2 et jQuery UI 1… >>> More

Related posts about autocomplete

jQuery autocomplete disabled makes autocomplete partially transparent, not disabled

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the jQuery UI's "autocomplete" function on a search on my site. When you change a radio button from 'area search" to "name search" I want it to disable the autocomplete, and re-enable it when you switch back. However, when you disable the autocomplete it doesn't hide the dropdown, it just… >>> More
jquery Autocomplete : autocomplete does not stop if string does not match

as seen on Stack Overflow - Search for 'Stack Overflow'
I used the auto-complete function in jquery. It's data source are the results from a php-back-end. $("#ice_id").autocomplete("ice-ver.php", { extraParams : { flavour_id: $("#flavour_id").val() } }); Let us take following example: We type in the flavour ID 3992 ...(and 3992 exists in the database… >>> More
autocomplete on dynamic textbox using jquey+autocomplete plugin

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I am using a form which has dynamic textboxes I want autocomplete functionality to be implemented on them and I am using Autocomplete Plugin and I want to bind them using live(). Can anyone help me out on how to implement it. Thanks in advance. >>> More
Jsf RichFaces autocomplete : get the String for autocomplete- method()

as seen on Stack Overflow - Search for 'Stack Overflow'
Part of my xhmtl-Page: <rich:autocomplete autocompleteMethod="#{autocompletMit.searchbyName()}" mode="cachedAjax" fetchValue="#{controller.mitarbeiter.mitarbeiterName}" autocompleteList="#{autocompletMit.autocompleteList}" minChars="1" autofill="true" var="it" >… >>> More
Is there more than one jQuery Autocomplete widget?

as seen on Stack Overflow - Search for 'Stack Overflow'
I thought there was only one - included in jQuery UI and documented here. I know there are third-party autocomplete widgets that plug-in to jQuery, like the one from devbridge. But I would describe that as an autocomplete widget for jQuery, rather than the jQuery autocomplete widget. But on… >>> More