CODEWITHSUNDEEP
jqueryjquery-uiautocompletecombobox
lloydphillips
lloydphillips

Reputation: 2855

How can you create a new value using jQuery UI combobox

I've just added the jQuery UI combobox to a page. It seems it restricts selections to only those passed in (or present in the select list). What I wanted to do was to have it so that if the user enters a value that isn't in the select list it sends the data off to the server (on the post) and creates one. I can't see any options to disable 'validation'. How would I go about adding this functionality?

--EDIT--

I've added the code in to get the autocomplete working with a button appended. However this isn't working when calling an Ajax method. The Ajax method is correctly returning json (a list of colours) but when I start typing 'Re' in the hope it'll filter down items that contain Red, it doesn't.

Here's 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();
        });

Upvotes: 7

Views: 6671

Answers (2)

evanlikesstuff
evanlikesstuff

Reputation: 46

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

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

The combobox demo uses an underlying select element as the backing store for the autocomplete widget. I would not recommend this for a form in which you allow the user to input whatever they want.

However, you can emulate the combobox effect yourself without too much trouble:

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 of the autocomplete widget, plus a button that will drop down all the options.

This way, the backing field is an input element, and you can take the user's input upon form submission and add it to the source for next time.

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

Upvotes: 13

Related Questions