How to create a new value using jQuery UI combobox

Question

I just added combobox jQuery UI to the page. It seems to limit the selection to only those who have passed (or is present in the selection list). I would like to make sure that if the user enters a value that is not in the selection list, he sends the data to the server (in the message) and creates it. I do not see any parameters to disable the "check". How can I add this functionality?

- EDIT--

I added code to load autocomplete with an added button. However, this does not work when calling the Ajax method. The Ajax method correctly returns json (a list of colors), but when I start typing "Re" in the hope that it will filter elements containing red, it is not.

Here is my code:

var $colInput = $("#Colour").autocomplete({ source: function (request, response) { $.ajax({ url: "/admin/stockitems/colours", dataType: "json", data: { id: null }, success: function (data) { var arr = []; $.each(data, function (i, val) { arr.push(val.Title); }); response(arr); } }); }, minLength: 0 }).addClass("ui-widget ui-widget-content ui-corner-left"); $("<button type='button'>&nbsp;</button>") .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter($colInput) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("ui-corner-right ui-button-icon") .click(function () { // close if already visible if ($colInput.autocomplete("widget").is(":visible")) { $colInput.autocomplete("close"); return; } $(this).blur(); $colInput.autocomplete("search", ""); $colInput.focus(); }); 

Answer 1

The combobox demo uses the base select element as the backup storage for the autocomplete widget. I would not recommend this for a form in which you allow the user to enter whatever they want.

However, you can emulate the combobox effect yourself without any problems:

 var $input = $("#tags").autocomplete({ source: availableTags, minLength: 0 }).addClass("ui-widget ui-widget-content ui-corner-left"); $("<button type='button'>&nbsp;</button>") .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter($input) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("ui-corner-right ui-button-icon") .click(function() { // close if already visible if ($input.autocomplete("widget").is(":visible")) { $input.autocomplete( "close" ); return; } $(this).blur(); $input.autocomplete("search", "" ); $input.focus(); }); 

Basically, this is the default behavior for the autocomplete widget, as well as a button that displays all the options.

Thus, the support field is an input element, and you can take user input when submitting the form and add it to the source next time.

Here is a working example: http://jsfiddle.net/andrewwhitaker/CDYBk/1/

Answer 2

You can also just grab the input value with something like $ (...). parentNode.children [1] .children [0] .value if you don't like messing with widgets. Then you can always add a selection option if you want.