Always show a specific selection in jQuery autocomplete, even if it does not match the input

Question

I have jQuery autocomplete (jquery ui version 1.8) in which I print the name. When this is available, I want the user to select a name from the list, as these are the names of the owners from our database. However, there is a case where they will need to add a new owner name, in which case I want them to select "Add New" from the autocomplete drop-down list. The problem is that if I include “Add new” as a selection in my autocomplete source data, it does not appear as a choice in the autocomplete drop-down list, because it does not match what the user enters in the text box.

Below is the javascript code. I do not include the server-side code, but let me say that the results from the server create a list in the drop-down list, for example, "Add new, Betty, Bob, Katie, Dan, Edward." "Selector" is a standard input field for html 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 understand that I cut a couple of pieces from javascript code for the URL and the data of my ajax call, but I decided that everything was fine, since my autostart "source" is not a problem here.

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

Any thoughts or decisions on how you can always choose "Add New"?

Thank you in advance.

Answer 1

I think Autocomplete is building a collection of objects received in an unordered list. how →

 <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 detection method when a list opens with an 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 added the list item to the autocomplete drop-down menu when it opens, so you always get “Add New” at the top of the list (this handles jQuery.prepend ()).