Index

Base Example

Requires the uiselect style sheet.

This style sheet can be modified to use the .uiselect class name instead of the default "ui-select" class name. I recommend using an empty contructor and default style sheet if you do not understand css styles.

Example
<!-- Place this in your <head> section //-->
<link rel="stylesheet" href="css/uiselect.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/jquery.uiselect.js"></script>

//setup select boxes
$(document).ready(function(){$('select').uiselect()});

From JSDefault

JS Event Binding

The following events will automatically trigger the origional select box's events

Triggers origional select onchange using jquery.

Triggers origional select onclick using jquery.

Dependencies

This uses the following jquery-ui libraries:

Api Documentation

Normally I use jsdoc for documentation, but for this it didn't really make sense.

Constructor .uiselect(<optional> String className)

String className - This will set the class name of the ui select wrapper.

NOTE: You cannot use a class name which is a uiselect action string.

Example
//Creating uiselect elements.
$('select').uiselect();
or
$('select').uiselect('my-style');

General Methods .uiselect(String method)

String method - The action/method that uiselect should perform on the selected elements. This is hooked to the origional select element.

Method .uiselect("refresh")

Will rebuild the uiselect element based on changes to the origional select box. Triggers the autocomplete widget method destroy.

Example
//Refresh the first select element, ignoring remaining select elements.
$('select').uiselect();
$('select:first').uiselect('refresh');
Method .uiselect("widget")

Returns the autocomplete widget associated with the select box. See autocomplete('widget'). This is basically the <ul> element that displays as the dropdown.

Example
//get an instance of the autocomplete widget.
$('select').uiselect();
var widget = $('select:first').uiselect('widget');

//change the z-index of the drop down menu
widget.css('background-color','yellow');
Method .uiselect(<autocomplete Event>, fn)

String <autocomplete Event> - Autocomplete widget events.

Function fn - Function to be executed on autocomplete event trigger

Example
//change the z-index on the autocomplete
//this is a known issue with jquery ui autoomplete widget

$('select').uiselect().each(function(){
  $(this).uiselect('autocompleteopen',
      function(){
          $(this).autocomplete('widget').css('z-index',99);
      });
});
Method .uiselect("autocomplete", method)

String "autocomplete" - Fixed string instructing .uiselect to execute autocomplete method.
String method - Autocomplete widget methods.

Example
//disable the autocomplete input element.
$('select').uiselect();
var widget = $('select:first').uiselect(autocomplete','disable');

//change the z-index of the drop down menu
widget.css('z-index',99)