选择时的 JQuery AutoComplete 事件

Question

我正在使用 AutoComplete 从选项列表中进行选择，其中包含选项值的数字 ID 和值的名称。

自动完成/组合框工作得很好，但是如何捕获选择事件？当从列表中进行选择时，我想使用该值来更新 DOM 的其他元素。

我四处搜索并找到了 AutoComplete 上的文档： https://api.jqueryui.com/autocomplete/#event-change

我试过了：

    if ( typeof $("#uid").autocomplete == "function" ) {
            $("#uid").on("autocompleteselect", function( event, ui ) {
                    alert("HERE");    
            });
    }

HTML：

    <p class="dlgline">
    <label for="uid">Select user:</label><br>
    <select id="uid" name="uid" style="display: none;"><option id="0"></option>
    <option value="3">Name 1</option>
    <option value="1">Another Name</option>
    <option value="2">And Another</option>
    </select>
    <span class="custom-combobox"><input title="" class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" autocomplete="off"><a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text"></span></a></span>

Javascript：

    $.widget( "custom.combobox", {
    _create: function() {
        this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );

        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
    },

    _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
            value = selected.val() ? selected.text() : "";

        this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy( this, "_source" )
            })
            .tooltip({
                tooltipClass: "ui-state-highlight"
            });

        this._on( this.input, {
            autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                    item: ui.item.option
                });
            },

            autocompletechange: "_removeIfInvalid"
        });
    },

    _createShowAllButton: function() {
        var input = this.input,
            wasOpen = false;

        $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .tooltip()
            .appendTo( this.wrapper )
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "custom-combobox-toggle ui-corner-right" )
            .mousedown(function() {
                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
            })
            .click(function() {
                input.focus();

                // Close if already visible
                if ( wasOpen ) {
                    return;
                }

                // Pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
            });
    },

    _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value && ( !request.term || matcher.test(text) ) )
                return {
                    label: text,
                    value: text,
                    option: this
                };
        }) );
    },

    _removeIfInvalid: function( event, ui ) {

        // Selected an item, nothing to do
        if ( ui.item ) {
            return;
        }

        // Search for a match (case-insensitive)
        var value = this.input.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
        this.element.children( "option" ).each(function() {
            if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                this.selected = valid = true;
                return false;
            }
        });
        // Found a match, nothing to do
        if ( valid ) {
            return;
        }
        // Remove invalid value
        this.input
            .val( "" )
            .attr( "title", value + " didn't match any item" )
            .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
            this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
    },

    _destroy: function() {
        this.wrapper.remove();
        this.element.show();
    }
});      

在显示对话框之前和填充内容之后：

    $("#uid").combobox();  

JSFiddle：

http://jsfiddle.net/SimonPlatten/wLxdjorp/3/

这是我基于我的原始代码：

https://jqueryui.com/resources/demos/autocomplete/combobox.html

Answer 1

试试jquery ui的select事件：

https://api.jqueryui.com/autocomplete/#event-select

Answer 2

使用

 $( ".selector" ).autocomplete({
        select:function(value, data) {
        //your selection code goes here
        }
});

Answer 3

我修改了成员函数：

        this._on( this.input, {
            autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                    item: ui.item.option
                });
                if ( objPeople && objPeople[ui.item.value] ) {
        var objUser = objPeople[ui.item.value];
        alert("HERE");            
      }
            },
            autocompletechange: "_removeIfInvalid"
        });

这行得通。