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');
        }
    });

バインディングのキーダウンの場合、選択が行われた場合でもこれが常に発生するという問題があります。ユーザーがオートコンプリートからアイテムを選択していない場合にのみバインド キーダウンを起動するにはどうすればよいですか? ユーザーが項目を選択したことを検出する方法はありますか?

ありがとう

4

3 に答える 3

1

値が選択されたかどうかを示す値を保持するdata-*それぞれの属性に変数を格納できます。input

これは、コードの後に​​説明する 1 つの警告で機能します。

$("#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

私は同じものを探していたので、次の解決策
を考え出しますJqueryオートコンプリートにいくつかの変更を加え、それは機能しました:
)JSファイル-

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

Idcssクラスを使用する代わりにinput、jsファイルのjqueryセレクターを変更するだけです。（変更1）

実際の質問へのリンク。

于 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 に答える