Question

我有一个自定义的JQuery自动完成控件，声明是这样的。

$('#SystemCode_Autocomplete').autocomplete({
    source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
    minLength: 1,
    change: function(event, ui) {// some function},
    select: function(event, ui) {// some function}
});

更改和选择事件是自定义的。问题是如果我在文本框中键入内容然后单击提交按钮（即没有标签输出或丢失焦点），或者如果我在键入文本框后按键提交，则不会触发更改事件，它必须在我提交之前。

我希望不要在提交按钮后面放置javascript，并且理想情况下从自动完成控件本身内执行此操作。我尝试将更改添加到模糊事件。

${'foo').blur(function() { $('bar').trigger('autocompletechange');
// or
${'foo').blur(function() { $('bar').change();

但他们都没有工作，任何人都有任何想法？

Answer 1

您可以尝试这样的事情：

$('#SystemCode_Autocomplete').autocomplete({
    source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
    minLength: 1,
    change: function(event, ui) {/* some function */},
    select: function(event, ui) {/* some function */}
}).each(function(){
    var self = $(this).closest("form").submit(function(e){
        self.trigger("change");

        // you may not need anything like this...but whatever
        if(!functionToCheckIfFormIsValid()){
            e.preventDefault();
        }
    });
});

Answer 2

焦点功能自动完成

在将焦点移动到某个项目（未选择）之前，ui.item指的是焦点项目。焦点的默认操作是将文本字段的值替换为焦点项的值，但前提是焦点事件是由键盘交互触发的。取消此事件可防止更新值，但不会阻止菜单项被聚焦。

解决问题：

    $('#SystemCode_Autocomplete').autocomplete({
        source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
        minLength: 1,
        focus: function( event, ui ) {
            return false;
        },
        select: function(event, ui) {
            alert('Select Event:'+ui.item.value);
        }
    });

Answer 3

所以你的问题是你必须确保在动作b之前发生了动作，并且你在两个事件处理程序之间协调时遇到了麻烦吗？这听起来像是一个非常常见的UI问题，而不仅限于jQuery。

在其他任何情况下你会如何解决？如果我建议你使用jQuery data对象附加到元素然后在每个方法中进行某种信号量检查，比如在一个方法中设置一个标志，在另一个方法中检查以查看是否国旗是设置？

我就是这样做的，不管是我。

Answer 4

DEMO： http://ask.altervista.org/demo/jquery-autocomplete-help/

$(function() {
var json = [{"label":"Access","value":0},{"label":"Documentum","value":0}];
$('#SystemCode_Autocomplete').autocomplete({
    source: function( request, responce ) {
        responce( $.map( json, function( item ) {
            return { id: item.value, label: item.label, value: item.label }
        }));
        $.each( json, function( i, item ) {
            if ( request.term.toLowerCase() == item.label.toLowerCase() ) { 
                   // do something here, ex.: AJAX call or form submit...
                $('#submit_button').click();
            }
        });   
    },
    minLength: 1,
    change: function(event, ui) { /*alert(ui.item.label + ' ' + ui.item.id)*/ },
    select: function(event, ui) {}
   });
});

Answer 5

好的，我完全可以将其更新为我们实际做的工作。基本上我们编辑了自动完成 .js 文件，以实现我们想要的功能。具体来说，我们将自己的选项添加到自动填充功能中，然后我们将_response方法编辑为类似的内容

_response: function (content) {
        if (content.length) {
            content = this._normalize(content);
            this._suggest(content);
            this._trigger("open");

            this.options.isInError = false;
            this.element.removeClass("input-validation-error");
        } else {
            this.close();

            if (this.element.val() == '') {
                this.options.hiddenField.val('');
            } else {
                this.options.hiddenField.val('-1');
            }
            if (this.options.mustBeInList) {
                this.options.isInError = true;
                this.element.addClass('input-validation-error');
            }
        }
        this.element.removeClass("ui-autocomplete-loading");
    },

这样我们就可以知道用户输入的“垃圾”是什么，并且控件变为红色并进入“错误”模式。为了阻止他们回发，我们这样做

case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    // when menu is open or has focus

                    if (self.options.isInError == true) {
                        return false;
                    }

                    if (self.menu.element.is(":visible")) {
                        event.preventDefault();
                    }
                    //passthrough - ENTER and TAB both select the current element
                case keyCode.TAB:
                    if (!self.menu.active) {
                        return;
                    }
                    self.menu.select(event);
                    break;

JQuery自动完成帮助

5 个答案: