4

我有一个自动完成功能。我想让用户选择从源中选择一个项目，这是标准功能。但我也想让用户能够输入任何值，并且当源中匹配 0 个项目时，允许用户提交新值。

我一直在尝试以下方法：

    $("#rwF1, #rwF2").autocomplete({
        source: itemshere,

        select: function(event, ui) {
           console.log('selection made'); 

        }

    }).bind('keydown', function() {
        var key = event.keyCode;
        if (key == $.ui.keyCode.ENTER || key == $.ui.keyCode.NUMPAD_ENTER) {
            console.log('user submitted content');
        }
    });

对于绑定 keydown，问题是即使进行了选择，它也总是会触发。如果用户没有从自动完成中选择一个项目，我怎样才能使绑定 keydown 只触发？有没有一种方法可以检测用户是否选择了一个项目？

谢谢

4

3 回答 3

1

您可以将一个变量存储在data-*每个属性的属性中，该属性input包含一个值，该值指示是否选择了一个值。

这适用于一个警告，我将在代码之后解释：

$("#rwF1, #rwF2").autocomplete({
    source: itemshere,
    select: function(event, ui) {
        $(this).data("selected", true);
    }
}).bind("keydown", function(e) {
    var $this = $(this);

    /* Use e.which, jQuery has normalized it across browsers */
    if (e.which === $.ui.keyCode.ENTER || 
        e.which === $.ui.keyCode.NUMPAD_ENTER) {

        /* If they selected an item... */
        if (!$this.data("selected")) {
            console.log("new item");
        } else {
            console.log('existing');
        }
    } else {
        $this.data("selected", false);
    }
});

示例：http: //jsfiddle.net/aAD6W/2/

我提到的警告是，如果用户在列表中键入一个项目而不选择它，select则不会被触发。如果这对你来说是一个破坏者，我可以提供一个解决方案（我没有在这里包括它，因为它会增加代码的复杂性）。

于 2012-04-21T00:32:00.710 回答
0

我一直在寻找相同的方法，因此提出了以下 解决
方案

        $(function() {
                    (function( $ ) {
                $.widget( "ui.combobox", {
                        _create: function() {
                            var self = this,
                                select = this.element.hide(),
                                selected = select.children( ":selected" ),
                                value = selected.val() ? selected.text() : "";
    // Change 1  Added selector instead of actual HTML so you can use this with any input                       
    var input = this.input = $( "#input_id" )    // your input box
                                .insertAfter( select )
                                .val( value )
                                .autocomplete({
                                    delay: 0,
                                    minLength: 0,
                                    source: function( request, response ) {
                                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                                        response( select.children( "option" ).map(function() {
                                            var text = $( this ).text();
                                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                                return {
                                                    label: text.replace(
                                                        new RegExp(
                                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                                            $.ui.autocomplete.escapeRegex(request.term) +
                                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                        ), "<strong>$1</strong>" ),
                                                    value: text,
                                                    option: this
                                                };
                                        }) );
                                    },
                                    select: function( event, ui ) {
                                        ui.item.option.selected = true;
                                        self._trigger( "selected", event, {
                                            item: ui.item.option
                                        });
                                    },
                                    change: function( event, ui ) {
                                        if ( !ui.item ) {
                                        var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                            valid = false;
                                            select.children( "option" ).each(function() {
                                            if ( $( this ).text().match( matcher ) ) {
                                            this.selected = valid = true;
                                            return false;
                                            }
                                            });
// Change 2 Commented this block so that user can enter value other than select  options                                            
//if ( !valid ) {
                                                // remove invalid value, as it didn't match anything
                                                //$( this ).val( "" );
                                                //select.val( "" );
                                                //input.data( "autocomplete" ).term = "";
                //return false;
                    //                      }
                                        }
                                    }
                                })
                                .addClass( "ui-widget ui-widget-content ui-corner-left" );

                            input.data( "autocomplete" )._renderItem = function( ul, item ) {
                                return $( "<li></li>" )
                                    .data( "item.autocomplete", item )
                                    .append( "<a>" + item.label + "</a>" )
                                    .appendTo( ul );
                            };

                            this.button = $( "<button type='button'>&nbsp;</button>" )
                                .attr( "tabIndex", -1 )
                                .attr( "title", "Show All Items" )
                                .insertAfter( input )
                                .button({
                                    icons: {
                                        primary: "ui-icon-triangle-1-s"
                                    },
                                    text: false
                                })
                                .removeClass( "ui-corner-all" )
                                .addClass( "ui-corner-right ui-button-icon" )
                                .click(function() {
                                    // close if already visible
                                    if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                                        input.autocomplete( "close" );
                                        return;
                                    }

                                    // work around a bug (likely same cause as #5265)
                                    $( this ).blur();

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

                        destroy: function() {
                            this.input.remove();
                            this.button.remove();
                            this.element.show();
                            $.Widget.prototype.destroy.call( this );
                        }
                    });
                })( jQuery );
                    $( "#combobox" ).combobox();
                    $( "#toggle" ).click(function() {
                        $( "#combobox" ).toggle();
                    });
                });

HTML 

<select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
        <option value="BASIC">BASIC</option>
</select>

无需使用Id任何 css 类input，只需更改 js 文件中的 jquery 选择器即可。（变更一）

链接到实际问题。

于 2012-04-20T20:39:28.910 回答
0

你试过keyUp吗？我们在工作中为职位做同样的事情，允许从自动完成中选择或输入他们喜欢的内容，然后将其保存到数据库中。这是我们的代码：

var jobs = new Array();

for (var i = 0; i < data.length; i++) { //data comes from AJAX call
    jobs[i] = { label: data[i].Value, text: data[i].Text };
}

$("#ContactJobTitleName").autocomplete({
    source: jobs,
    select: function (event, item) {
        $("#ContactJobTitleId").val(item.item.text);
    }
});

我们这样做是为了重置选定的职位，但您可以使用它来保存您的新项目：7

$("#ContactJobTitleName").keyup(function (e) {
    if (e.which == 8 && $(this).val().length == 0) {
        $("#ContactJobTitleId").val(0);
    }
});
于 2012-04-20T20:39:34.043 回答