Jquery 自动完成 - 预填充文本字段 [英] Jquery Autocomplete - prefill the text field

问题描述

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

I have a autocomplete field (adapted from the geo autocomplete to find geolocations), when a user selects the location from the list I grab the lat/lon and some other info used for the search. However right now it only works if the user actually selects from the autocomplete list (as opposed to start typing and clicking enter e.g. they haven't chosen from the list).

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

I'm seeing the behaviour I wish to replicate on http://www.airbnb.com/, basically if you start typing a location (e.g. London) the actual textfield is pre-populated with the first entry on the list - can someone explain how this can be done with jquery autocomplete? I can set the autoFocus to true which focuses on the first field, but doesn't actually fill the text field in?

感谢任何帮助.

推荐答案

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

Here is a solution. It might need some tweaking to work with several autocomplete on the same page but it works with one:

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

To initialize the autocomplete widget, you have to add the new option selectFirst: true/false.

自动填充和 createSelection 方法取自这个自动完成插件和实时事件的绑定受到此帖子的启发.

The autofill and createSelection methods were taken from this autocomplete plugin and the binding of the live events was inspired by this post.

享受

编辑

我已经修改了代码，现在它与 jQuery UI 自动完成小部件完全集成.它适用于同一页面上的多个插件实例.

I have adapted the code so now it fully integrates with the jQuery UI Autocomplete Widget. And it works with multiple instances of the plugin on the same page.

:o)

这篇关于Jquery 自动完成 - 预填充文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！