Question

What I have is jqgrid which uses jQueryUI autocomplete in a column. Everything works perfect except 1 little thing, if user choose to write “fsdfsdfsfasf” and press enter my program will of course freak out and tell me that such item does not exist.

What I want is to make some kind of validation, so if user enter some data which does not exist in autocomplete list program should automatically put autocomplete text to be "" just like here: http://view.jquery.com/trunk/plugins/autocomplete/demo/ in the “month” field.

Since I am using jQueryUI autocomplete and not jquery autocomplete i cant use the mustmatch option.

{ 
    name: 'Brand', 
    index: 'Brand', 
    align: 'left', 
    width: 50, 
    sortable: true, 
    editable: true, 
    edittype: 'text', 
    editoptions: {
        dataInit:
        function (elem) {
            $(elem).autocomplete({
                delay: 0,
                minLength: 0,
                source: '@Url.Action("GetBrands")',
                minChars: 0,
                max: 12,
                autoFill: true,
                mustMatch: true,
                matchContains: false,
                scrollHeight: 220,
                formatItem: function(data, i, total) {
                    return data[0];
                },
                select: function (event, ui) {
                    if (ui.item.value == "Opret ny Brand...") {
                        $(function () {
                            var dialogDiv = $('#dialog');
                            var viewUrl = '@Url.Action("CreateBrand")';

                            $.get(viewUrl, function (data) {
                                dialogDiv.html(data);

                                var $form = $("#updateCarForm");
                                $form.unbind();
                                $form.data("validator", null);

                                //Check document for changes
                                $.validator.unobtrusive.parse(document);

                                //Re add validation with changes
                                $form.validate($form.data("unobtrusiveValidation").options);

                                //open dialog
                                dialogDiv.dialog('open');
                            });

                        });
                    }
                }

            })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><span style='display:inline-block;width:60px;'><b>" +
                        item.value + "</b></span></a>")
                    .appendTo(ul);
           };
        }
    }
},

Answer 1

You can implement this functionality by providing a function as an argument to the source parameter of autocomplete and doing the AJAX request yourself. Something like:

$("#auto").autocomplete({
    source: function(request, response) {
        // Manually perform the AJAX request:
        var element = this.element;
        $.get('@Url.Action("GetBrands")', request, function (results) {
            // No results? Clear out the input field.
            if (!results.length) {
                element.val('');
            }
            // Notify the widget of the results.
            response(results);
        });
    }
});

(Untested. You may need to tweak the AJAX call)

I can provide a remote example if necessary, but the concept is the same with an example using a local data source: http://jsfiddle.net/andrewwhitaker/Dgfgr/