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/

JQgrid与jquery UI自动完成验证

1 个答案: