JQueryUI Autocomplete - multiple values, remote

August 16, 2017

This is an example of an autocomplete field which allows to enter several values on an input box.

The list of suggested values on the pull down are retrieved from a remote script. In this example a php script.

  <meta charset="utf-8" />

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


    <label for="items">Items: </label>
    <input id="items" name="items" value="" />

  $(function() {

    // don't navigate away from the field on tab when selecting an item
    .on("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).autocomplete("instance").menu.active) {
      source: function(request, response) {
          url: "jquery_autocomplete_search.php",
          dataType: "json",
          data: {
            search_text: request.term.split(/,\s*/).pop(),
            max_rows: 12,
          success: function(data) {
      minLength: 2,
      focus: function() {
        // prevent value inserted on focus
        return false;
      select: function(event, ui) {
        var terms = this.value.split(/,\s*/);
        // remove the current input
        // add the selected item
        // add placeholder to get the comma-and-space at the end
        this.value = terms.join(", ");
        return false;
      open: function(event, ui) {
        // when used on a bootstrap's modal dialog, the autocomplete drop-down appears behind the modal.
        // this put it back on top
        $("ul.ui-autocomplete").css("z-index", 5000);



The php script must return an array in json format as shown in the following code.

Code based on https://jqueryui.com/autocomplete/#multiple-remote