Question

I have a jQuery autocomplete (jquery ui version 1.8) in which I type a name. When available, I want the user to select a name from the list as these are owner names from our database. However, there is the occassion where they will need to add a new owner name, and in this instance, I want them to chose “Add New” from the autocomplete’s drop down list. The problem is, if I include “Add New” as a choice in my autocomplete source data, it does not show up as a choice in the autocomplete drop down list as it does not match what the user is typing in the text box.

Below is the javascript code. I am not including the server side code, but let’s say the results from the server create a list in the drop down that such as “Add New, Betty, Bob, Cathy, Dan, Edward.” The ‘selector’ is a standard html input field of type text.

    $('.selector').autocomplete({
        autoFocus: false,
        minLength: 1,
        focus: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        },
        select: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        }
    });

    $('.selector').keyup(function(){
        // Each time a new character is entered, recreate the drop down list by matching entered characters to beginning of first name field

        $.ajax({
            type: "POST",
            url: "(url to c#.net asmx page and method)",
            contentType: "application/json; charset=utf-8",
            data: '{(various data parameters)}',
            datatype: "json",
            error: function (data) {
                var data = $.parseJSON(data.responseText);
                alert("Error: " + data.Message);
            },
            success: function (data, status, info) {
                if (data.hasOwnProperty("d")) {
                    var nameList = data.d;
                }
                else {
                    var nameList = data;
                }
                $('.selector').autocomplete("option", "source", nameList);
            }
        });
    });

I realize I’ve cut a couple of chunks out of the javascript code for the url and data portions of my ajax call, but I figured that was OK since getting my autocomplete’s “source” isn’t the issue here.

What needs to happen, is for example, when I type in the letter b, I need to see “Add New, Bill, Betty” as my three choices in the list but right now I only see “Bill, Betty” because there is no “b” in “Add New”.

Any thoughts or solutions on how to get the “Add New” choice to always be available?

Thank you very much in advance.

Answer 1

I think Autocomplete builds the collection of objects retrieved into an unordered list. like ->

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul> 

It also has a method to detect when the list is opened with the open event.

$('selector').autocomplete({
  open: function(){
    $('.ui-autocomplete').prepend('<li class="ui-menu-item"><a class="ui-corner-all ui-add-new"> Add New </a></li>');
  }
});

You can see that we’ve added a list item to the auto-complete dropdown menu when it opens, so that you always get ‘Add New’ at the top of the list (jQuery’s .prepend() handles that).