代码之家 › 专栏 › 技术社区 › MrJoeBlow

JQuery自动完成帮助

javascript-events jquery-ui jquery javascript

MrJoeBlow · 技术社区 · 15 年前

我有一个定制的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放在submit按钮后面的情况下实现这一点,并且在理想情况下从autocomplete控件本身中实现这一点。我试着把改变添加到模糊事件中。

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

5 回复 | 直到 15 年前

David Murdoch 15 年前

你可以试试这样:

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

user1217167 15 年前

集中函数自动完成

在焦点移动到某个项目(而不是选择)之前,用户界面。项目指的是重点项目。focus的默认操作是将文本字段的值替换为焦点项目的值,但前提是焦点事件是由键盘交互触发的。取消此事件会阻止值更新,但不会阻止菜单项聚焦。

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

jcolebrand 15 年前

所以你的问题是,你必须确保动作a发生在动作b之前,而你在协调两个事件处理程序之间的关系时遇到了困难?这听起来像是一个非常常见的UI问题,而不仅仅限于jQuery。

jQuery data 对象附加到元素,然后在每个方法中执行某种信号量检查,比如在一个方法中设置标志,在另一个方法中检查标志是否已设置?

Luca Filosofi 15 年前

演示: 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) {}
   });
});

MrJoeBlow 15 年前

好的,我完全同意更新这篇文章,让它运行起来。基本上我们编辑了自动完成 .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;