jQuery UI Example - Autocomplete

Search and filter based on user input values, allowing users to quickly find and select from a predefined list.

For more details about the autocomplete widget, please refer to the API documentation Autocomplete Widget.

Default Functionality

As you type in the input field, the Autocomplete widget provides suggestions. In this example, suggestions for programming languages are provided. You can type "ja" to try it out, which will yield results like Java or JavaScript.

The data source is a simple JavaScript array, provided to the widget using the source option.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default Functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags">
</div>


</body>
</html>

View Demo

Accent Folding

The autocomplete field uses a custom source option to match results with accented characters, even if the input field does not contain accented characters. However, if you type accented characters in the input field, non-accented results will not be displayed.

Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Accent Folding</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

<script>
  $(function() {
    var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];

    var accentMap = {
      "á": "a",
      "ö": "o"
    };
    var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    };

    $( "#developer" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( names, function( value ) {
          value = value.label || value.value || value;
          return matcher.test( value ) || matcher.test( normalize( value ) );
        }) );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <form>
  <label for="developer">Developer:</label>
  <input id="developer">
  </form>
</div>


</body>
</html>

View Demo

Combobox

A custom widget created with Autocomplete and Button. You can type some characters to get filtered results based on your input, or use the button to select from the full list.

The input is read from an existing select element and passed to Autocomplete with a custom source option.

This is an unsupported, imperfect widget. It's purely for demonstration of custom autocomplete functionality. For more details on how this widget works, click here to read the related jQuery article.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Combobox</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* Support: IE7 */
    *height: 1.7em;
    *top: 0.1em;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 0.3em;
  }
  </style>
  <script>
  (function( $ ) {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );

this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},

_createAutocomplete: function() {
  var selected = this.element.children(":selected"),
    value = selected.val() ? selected.text() : "";

  this.input = $("<input>")
    .appendTo(this.wrapper)
    .val(value)
    .attr("title", "")
    .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
    .autocomplete({
      delay: 0,
      minLength: 0,
      source: $.proxy(this, "_source")
    })
    .tooltip({
      tooltipClass: "ui-state-highlight"
    });

  this._on(this.input, {
    autocompleteselect: function(event, ui) {
      ui.item.option.selected = true;
      this._trigger("select", event, {
        item: ui.item.option
      });
    },

    autocompletechange: "_removeIfInvalid"
  });
},

_createShowAllButton: function() {
  var input = this.input,
    wasOpen = false;

  $("<a>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .tooltip()
    .appendTo(this.wrapper)
    .button({
      icons: {
        primary: "ui-icon-triangle-1-s"
      },
      text: false
    })
    .removeClass("ui-corner-all")
    .addClass("custom-combobox-toggle ui-corner-right")
    .mousedown(function() {
      wasOpen = input.autocomplete("widget").is(":visible");
    })
    .click(function() {
      input.focus();

      // Close if already visible
      if (wasOpen) {
        return;
      }

      // Pass empty string as search value to show all results
      input.autocomplete("search", "");
    });
},

_source: function(request, response) {
  var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

(function($) {
  $.widget("custom.combobox", {
    _create: function() {
      this.wrapper = $("<span>")
        .addClass("custom-combobox")
        .insertAfter(this.element);

      this.element.hide();
      this._createAutocomplete();
      this._createShowAllButton();
    },

    _createAutocomplete: function() {
      var selected = this.element.children(":selected"),
        value = selected.val() ? selected.text() : "";

      this.input = $("<input>")
        .appendTo(this.wrapper)
        .val(value)
        .attr("title", "")
        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
        .autocomplete({
          delay: 0,
          minLength: 0,
          source: $.proxy(this, "_source")
        })
        .tooltip({
          tooltipClass: "ui-state-highlight"
        });

      this._on(this.input, {
        autocompleteselect: function(event, ui) {
          ui.item.option.selected = true;
          this._trigger("select", event, {
            item: ui.item.option
          });
        },

        autocompletechange: "_removeIfInvalid"
      });
    },

    _createShowAllButton: function() {
      var input = this.input,
        wasOpen = false;

      $("<a>")
        .attr("tabIndex", -1)
        .attr("title", "Show All Items")
        .tooltip()
        .appendTo(this.wrapper)
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass("ui-corner-all")
        .addClass("custom-combobox-toggle ui-corner-right")
        .mousedown(function() {
          wasOpen = input.autocomplete("widget").is(":visible");
        })
        .click(function() {
          input.focus();

          // Close if already visible
          if (wasOpen) {
            return;
          }

          // Pass empty string as value to search for, displaying all results
          input.autocomplete("search", "");
        });
    },

    _source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response(this.element.children("option").map(function() {
        var text = $(this).text();
        if (this.value && (!request.term || matcher.test(text)))
          return {
            label: text,
            value: text,
            option: this
          };
      }));
    },

    _removeIfInvalid: function(event, ui) {

      // Selected an item, no other action needed
      if (ui.item) {
        return;
      }

      // Search for a match (case-insensitive)
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children("option").each(function() {
        if ($(this).text().toLowerCase() === valueLowerCase) {
          this.selected = valid = true;
          return false;
        }
      });

      // Found a match, no other action needed
      if (valid) {
        return;
      }

      // Remove invalid value
      this.input
        .val("")
        .attr("title", value + " didn't match any item")
        .tooltip("open");
      this.element.val("");
      this._delay(function() {
        this.input.tooltip("close").attr("title", "");
      }, 2500);
      this.input.data("ui-autocomplete").term = "";
    },

    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });
})(jQuery);

$(function() {
  $("#combobox").combobox();
  $("#toggle").click(function() {
    $("#combobox").toggle();
  });
});

<body>
  <div class="ui-widget">
    <label>Your favorite programming language:</label>
    <select id="combobox">
      <option value="">Please select...</option>
      <option value="ActionScript">ActionScript</option>
      <option value="AppleScript">AppleScript</option>
      <option value="Asp">Asp</option>
      <option value="BASIC">BASIC</option>
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Clojure">Clojure</option>
      <option value="COBOL">COBOL</option>
      <option value="ColdFusion">ColdFusion</option>
    </select>
  </div>
</body>

<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">Show Basic Select Box</button>

</body>
</html>

View Demo

Custom Data and Display

You can use custom data formats and display the data by simply overriding the default focus and select behaviors.

Try typing "j" or press the down arrow key to get a list of items.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Custom Data and Display</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $("#project").autocomplete({
      minLength: 0,

source: projects,
focus: function(event, ui) {
  $("#project").val(ui.item.label);
  return false;
},
select: function(event, ui) {
  $("#project").val(ui.item.label);
  $("#project-id").val(ui.item.value);
  $("#project-description").html(ui.item.desc);
  $("#project-icon").attr("src", "images/" + ui.item.icon);

  return false;
}
})
.data("ui-autocomplete")._renderItem = function(ul, item) {
  return $("<li>")
    .append("<a>" + item.label + "<br>" + item.desc + "</a>")
    .appendTo(ul);
};
});
</script>
</head>
<body>

<div id="project-label">Select a project (type "j"):</div>
<img decoding="async" id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

</body>
</html>

View Demo

Multiple Values

Usage: Type some characters, such as "j", to see related programming language results. Select a value and then continue typing characters to add other values.

This example demonstrates how to use the source option and some events to implement multiple autocomplete values in a single text field.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Multiple Values</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split(val) {
      return val.split(/,\s*/);
    }
    function extractLast(term) {

return split(term).pop();
}

$( "#tags" )
  // Prevent the default action when an item is selected
  .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-autocomplete" ).menu.active ) {
      event.preventDefault();
    }
  })
  .autocomplete({
    minLength: 0,
    source: function( request, response ) {
      // Call autocomplete, but extract the last term
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
      // Prevent value insertion on focus
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      // Remove the current input
      terms.pop();
      // Add the selected item
      terms.push( ui.item.value );
      // Add a placeholder, appending a comma + space at the end
      terms.push( "" );
      this.value = terms.join( ", " );
      return false;
    }
  });
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Programming Languages:</label>
  <input id="tags" size="50">
</div>

</body>
</html>

View Demo

Multiple Values, Remote

Usage: Type at least two characters to get bird names. Select a value and continue typing characters to add more values.

This example demonstrates how to use the source option and some events to input multiple autocomplete values in a single text field.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Multiple Values, Remote</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#birds" )
      // Prevent the default action when an item is selected

$(document).ready(function() {
  $("#birds").bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).data("ui-autocomplete").menu.active) {
      event.preventDefault();
    }
  })
  .autocomplete({
    source: function(request, response) {
      $.getJSON("search.php", {
        term: extractLast(request.term)
      }, response);
    },
    search: function() {
      // Custom minimum length
      var term = extractLast(this.value);
      if (term.length < 2) {
        return false;
      }
    },
    focus: function() {
      // Prevent value inserted on focus
      return false;
    },
    select: function(event, ui) {
      var terms = split(this.value);
      // Remove the current input
      terms.pop();
      // Add the selected item
      terms.push(ui.item.value);
      // Add placeholder to end with comma + space
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds:</label>
  <input id="birds" size="50">
</div>

</body>
</html>

View Demo

Remote JSONP Datasource

Usage: Type at least two characters to get bird names. Select a value and continue typing characters to add more values.

This example demonstrates how to fetch data using jsonp.

$( "#birds" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "/try/jqueryui/search.php",
      dataType: "jsonp",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data );
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    log( "Selected: " + ui.item.value + " aka " + ui.item.id );
  }
});

</script> </head> <body>

<div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds"> </div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>

</body> </html>


[View Demo](../try/tryit.php?filename=jqueryui-example-autocomplete-remote-jsonp)

## Remote Data Source

As you type characters in the text field, the Autocomplete widget provides suggestions. In this example, it shows names of birds relevant to the characters you've typed in the text field, once you've typed at least two characters.

In this example, the data source is a server-side script that returns JSON data, specified with a simple source option. Additionally, the minLength option is set to 2 to prevent too many results from being returned, and the select event is used to display some feedback.

<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Remote with Cache</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; }

    $.getJSON( "search.php", request, function( data, status, xhr ) {
      cache[ term ] = data;
      response( data );
    });
  }
});

}); </script> </head> <body>

<div class="ui-widget"> <label for="birds">Birds:</label> <input id="birds"> </div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> Results: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>

</body> </html>


[View Demo](../try/tryit.php?filename=jqueryui-example-autocomplete-remote)

## Remote with Cache

As you type characters in the text field, the Autocomplete widget provides suggested results. In this example, it shows names of birds related to the characters you type in the text field, after you have typed at least two characters.

To improve performance, some local caching has been added here, similar to the remote data source example. Here, the cache only stores one query and can be extended to cache multiple values, one for each entry.

    $.getJSON( "search.php", request, function( data, status, xhr ) {
      cache[ term ] = data;
      response( data );
    });
  }
});

}); </script> </head> <body>

<div class="ui-widget"> <label for="birds">Birds:</label> <input id="birds"> </div>

</body> </html>


[View Demo](../try/tryit.php?filename=jqueryui-example-autocomplete-remote-with-cache)

## Scrollable Results

When displaying a long list of options, you can simply set max-height for the autocomplete menu to prevent the menu from becoming too long. Try typing "a" or "s" to get a long list of scrollable results.

<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Scrollable Results</title>

```html
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  /* Prevent horizontal scrollbar */
  overflow-x: hidden;
}
/* IE 6 does not support max-height
 * We use height instead, but this forces the menu to always display at that height
 */
* html .ui-autocomplete {
  height: 100px;
}
</style>
<script>
$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags">
</div>

</body>
</html>

View Demo

XML Data

This example demonstrates how to fetch some XML data and parse it using jQuery methods, then provide it to autocomplete as a data source.

This example can also serve as a reference for parsing a remote XML data source - parsing occurs on each source callback request.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - XML Data</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading { background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat; }
  </style>
  <script>
  $(function() {
    function log(message) {
      $("<div/>").text(message).prependTo("#log");

$( "#log" ).attr( "scrollTop", 0 );
}

$.ajax({
  url: "/try/jqueryui/london.xmllondon.xml",
  dataType: "xml",
  success: function( xmlResponse ) {
    var data = $( "geoname", xmlResponse ).map(function() {
      return {
        value: $( "name", this ).text() + ", " +
          ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
        id: $( "geonameId", this ).text()
      };
    }).get();
    $( "#birds" ).autocomplete({
      source: data,
      minLength: 0,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  }
});
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">London Match:</label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Results:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</body>
</html>

View Demo

❮ Api Show Example Effect ❯

jQuery UI Example - Autocomplete

Default Functionality

Accent Folding

Categories

Combobox

Custom Data and Display

Multiple Values

Multiple Values, Remote

Remote JSONP Datasource

XML Data