Jquery自动填充 – 预填充文本字段

(function( $) {

    $.extend($.ui.autocomplete.prototype,{

        _createSELEction: function($input,start,end) {

            // get a reference to the input element
            var field = $input.get(0);

            // set the SELEction (browser specific methods)
            if( field.createTextRange ){
                var selRange = field.createTextRange();
                selRange.collapse(true);
                selRange.moveStart("character",start);
                selRange.moveEnd("character",end);
                selRange.SELEct();
            } else if( field.setSELEctionRange ){
                field.setSELEctionRange(start,end);
            } else {
                if( field.SELEctionStart ){
                    field.SELEctionStart = start;
                    field.SELEctionEnd = end;
                }
            }

            field.focus();
        },_autoFill: function($input,svalue) {

            // here 'this' is the plugin itself
            // if the last user key pressed was BACkspace,don't autofill
            if (this._lastKeyPressCode != 8) {

                // fill in the value (keep the case the user has typed)
                $input.val($input.val() + sValue.subString(this._prevIoUsValue.length));

                // SELEct the portion of the value not typed by the user (so the next character will erasE)
                this._createSELEction($input,this._prevIoUsValue.length,sValue.length);
            }
        },_prevIoUsValue: '',_lastKeyPressCode: null
    });

        $( ".ui-autocomplete-input" )
        .live( "keyup",function() {

            var $this = $(this),autocomplete = $this.data('autocomplete'),key;

            autocomplete._lastKeyPressCode = key = event.which;

            // do nothing on BACkslash/command keys
            if( key == 46 || (key > 8 && key < 32) )
                return autocomplete.menu.deactivate();

            // check value is different
            var v = $this.val();
            if (v == autocomplete._prevIoUsvalue)
                return;

            // save value
            autocomplete._prevIoUsValue = v;

        })
        .live( "autocompleteopen",autocomplete = $this.data( "autocomplete" ),menu = autocomplete.menu;

            // check the 'SELEctFirst' setTing
            if ( !autocomplete.options.SELEctFirst ) {
                return;
            }

            // activate the menu
            menu.activate( $.Event({ type: "mouseenter" }),menu.element.children().first() );

            // set the autoFill
            autocomplete._autoFill($this,menu.element.children().first().text());
        });

    }( jQuery ));

    $('.for-autocomplete').autocomplete({SELEctFirst: true,source: ['aa','absolution','borinage','baba']});

要初始化自动完成小部件,您必须添加新选项SELEctFirst：true / false.

自动填充和createSELEction方法取自此autocomplete plugin,现场活动的绑定受到此post的启发.

请享用

编辑

我已经调整了代码,所以它现在与jQuery UI Autocomplete Widget完全集成.它适用于同一页面上的多个插件实例.

：O)