Jquery Autocomplete之预填充文本字段

我有一个自动完成字段(改编自地理自动完成以查找地理位置)，当用户从列表中选择位置时，我会获取纬度/经度和用于搜索的其他一些信息。然而，现在只有当用户实际从自动完成列表中进行选择时它才有效(而不是开始输入并单击 Enter，例如他们尚未从列表中进行选择)。

我看到了我希望在 http://www.airbnb.com/ 上复制的行为，基本上，如果您开始输入一个位置(例如伦敦)，实际的文本字段会预先填充列表中的第一个条目 - 有人可以解释如何使用 jquery 自动完成来完成此操作吗？我可以将 autoFocus 设置为 true ，它专注于第一个字段，但实际上并没有填充文本字段？

感谢任何帮助。

请您参考如下方法:

这里有一个解决方案。它可能需要一些调整才能在同一页面上使用多个自动完成功能，但它可以使用一个:

(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", function() { 
 
            var $this = $(this), 
                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而现场事件的绑定(bind)正是受此启发post .

享受

编辑

我已经调整了代码，现在它与 jQuery UI 自动完成小部件完全集成。它可以与同一页面上的插件的多个实例一起使用。

:o)