JQgrid 与 jquery UI 自动完成验证

Question

我所拥有的是 jqgrid，它在列中使用 jQueryUI 自动完成功能。一切都很完美，除了一件小事，如果用户选择写“fsdfsdfsfasf”并按回车键，我的程序当然会惊慌失措并告诉我这样的项目不存在。

我想要的是进行某种验证，因此如果用户输入自动完成列表中不存在的某些数据，程序应自动将自动完成文本设置为 "" 就像这里一样： http://view.jquery.com/trunk/plugins/autocomplete/demo/ 在“月”字段。

由于我使用的是 jQueryUI 自动完成而不是 jquery 自动完成，我无法使用 mustmatch 选项。

{ 
    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

您可以通过提供一个函数作为自动完成的 source 参数的参数并自行执行 AJAX 请求来实现此功能。类似于：

$("#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);
        });
    }
});

（未经测试。您可能需要调整 AJAX 调用）

如果需要，我可以提供远程示例，但概念与使用本地数据源的示例相同：http://jsfiddle.net/andrewwhitaker/Dgfgr/