CODEWITHSUNDEEP
javascriptjquery-uiautocomplete
ewitkows
ewitkows

Reputation: 3618

jqueryUI autocomplete - always append an option regardless of search results

We're using jQuery autocomplete so a user can look for an existing account, but we always want the option of "Add New Account" to appear at the bottom of the list, even after starting a search. The issue I'm having is that using "Add New Account" as a list item will disappear after the search occurs, for example, if you search for "xyz", Add New Account doesn't show as an option because there's no string match on "xyz".

In the API Documentation the closest thing I can find is using the open event. I tried the following:

 $("#tags").autocomplete({
            source: availableTags, //look at API doc on sourcing data..
            open: function () {
                  $('.ui-autocomplete').append('<li class="ui-menu-item"><div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">Add New Account</div></li>');
            }
          });

The good news is that "Add New Account" appears at the end of the list. The bad news is that when you hover\select the item, an error occurs:

Uncaught TypeError: Cannot read property 'value' of undefined

It's an error that comes from the belly of the jQueryUI library, some ui data is being sent to the menufocus event with data items marked as "ui-autocomplete-item", but in that collection of data there's no item matching the Add New Account item.

My theory here is that the data being passed to the menufocus event is directly from the search results, and because that item isn't in the search results.. it's breaking!

Any idea's on how I can always append the menu option "Add New Account" to autocomplete?

Upvotes: 2

Views: 1805

Answers (1)

loelsonk
loelsonk

Reputation: 3596

This is your missing method, you just need to access ui.content property. 

  response: function( event, ui ) {
    //console.log(ui.content);
    ui.content.unshift({value:"Add new account", label:"Add new account"});
  }

Here is working example.

$( 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,
      response: function( event, ui ) {
        //console.log(ui.content);
        ui.content.unshift({value:"Add new account", label:"Add new account"});
      }
    });
  } );
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  .ui-autocomplete {
    height: 100px;
  }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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>
  
  
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Upvotes: 3

Related Questions