Autocomplete

Theming

The autocomplete widget uses the jQuery UI CSS framework to style its look and feel. If autocomplete specific styling is needed, the following CSS class names can be used:

Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

$( ".selector" ).autocomplete({
  appendTo: "#someElem"
});

// Getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
 
// Setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );

$( ".selector" ).autocomplete({
  autoFocus: true
});

// Getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
 
// Setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );

$( ".selector" ).autocomplete({
  delay: 500
});

// Getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
// Setter
$( ".selector" ).autocomplete( "option", "delay", 500 );

$( ".selector" ).autocomplete({
  disabled: true
});

// Getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
// Setter
$( ".selector" ).autocomplete( "option", "disabled", true );

$( ".selector" ).autocomplete({
  minLength: 0
});

// Getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
// Setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );

$( ".selector" ).autocomplete({
  position: { my : "right top", at: "right bottom" }
});

// Getter
var position = $( ".selector" ).autocomplete( "option", "position" );
 
// Setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

$( ".selector" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

// Getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// Setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

Invoke the close method:

$( ".selector" ).autocomplete( "close" );

Invoke the destroy method:

$( ".selector" ).autocomplete( "destroy" );

Invoke the disable method:

$( ".selector" ).autocomplete( "disable" );

Invoke the enable method:

$( ".selector" ).autocomplete( "enable" );

Retrieves the autocomplete's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the autocomplete plugin has loaded.

Invoke the instance method:

$( ".selector" ).autocomplete( "instance" );

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

Invoke the method:

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );

Invoke the method:

var options = $( ".selector" ).autocomplete( "option" );

Sets the value of the autocomplete option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

Invoke the method:

$( ".selector" ).autocomplete( "option", "disabled", true );

Invoke the method:

$( ".selector" ).autocomplete( "option", { disabled: true } );

Invoke the search method:

$( ".selector" ).autocomplete( "search", "" );

Invoke the widget method:

$( ".selector" ).autocomplete( "widget" );

Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it.

Add the item's value as a data attribute on the <li>.

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( item.label )
    .appendTo( ul );
}

Add a CSS class name to the odd menu items.

_renderMenu: function( ul, items ) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item );
  });
  $( ul ).find( "li:odd" ).addClass( "odd" );
}

Always display the menu as 500 pixels wide.

_resizeMenu: function() {
  this.menu.element.outerWidth( 500 );
}

Initialize the autocomplete with the change callback specified:

$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});

Bind an event listener to the autocompletechange event:

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );

Initialize the autocomplete with the close callback specified:

$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});

Bind an event listener to the autocompleteclose event:

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );

Initialize the autocomplete with the create callback specified:

$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});

Bind an event listener to the autocompletecreate event:

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

Initialize the autocomplete with the focus callback specified:

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});

Bind an event listener to the autocompletefocus event:

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

Initialize the autocomplete with the open callback specified:

$( ".selector" ).autocomplete({
  open: function( event, ui ) {}
});

Bind an event listener to the autocompleteopen event:

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );

Initialize the autocomplete with the response callback specified:

$( ".selector" ).autocomplete({
  response: function( event, ui ) {}
});

Bind an event listener to the autocompleteresponse event:

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );

Initialize the autocomplete with the search callback specified:

$( ".selector" ).autocomplete({
  search: function( event, ui ) {}
});

Bind an event listener to the autocompletesearch event:

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );

Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

Initialize the autocomplete with the select callback specified:

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});

Bind an event listener to the autocompleteselect event:

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>
$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script>
 
</body>
</html>