Jquery自动完成 - 预填文本字段

Question

Jquery自动完成 - 预填文本字段

5

我有一个自动完成字段（改编自地理自动完成以查找地理位置），当用户从列表中选择位置时，我会获取经纬度和一些用于搜索的其他信息。但是，如果用户只是开始输入并单击Enter（例如，他们还没有从列表中选择），那么它现在只能在用户实际从自动完成列表中进行选择时才起作用。

我希望复制的行为在http://www.airbnb.com/上可以看到，基本上，如果您开始输入位置（例如伦敦），则实际文本字段将预先填充列表中的第一个条目 - 有人能解释一下如何使用jquery自动完成完成这项工作吗？我可以将autoFocus设置为true，它会将焦点放在第一个字段上，但实际上不会填写文本字段？

非常感谢任何帮助。

- Xrender

你不仅希望第一个条目保持不变，而且还希望自动插入的部分被选中，以便在继续输入时将其覆盖。 - Flo

我认为 jQuery UI Autocomplete 不提供这样的行为。找到了这个其他自动完成插件，它可以做你想要的事情。不过可能有点过时。 - Didier Ghys

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Didier Ghys · Accepted Answer

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

(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。

自动填充和创建选择方法来自于此自动完成插件，而现场事件的绑定则受到此帖子的启发。

祝好！

编辑

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

:o)