2

jQuery UI のオートコンプリート プラグインでオートコンプリートする複数の入力フィールドがあります。各入力には、対応する非表示の入力 (ユーザー名とユーザー ID など) があります。変更ハンドラーで、非表示フィールドの値を設定しています。これは期待どおりに機能します。

Return キー + マウス クリックで自動的に次のフィールドを選択するようにしたい場合に問題が発生します。変更イベントを手動でトリガーしないと、変更イベントui.itemは null になります。手動でトリガーすると、 null で2番目の変更イベントが発生しますui.item。

null から保護するために変更にガードを追加できますui.itemが、これにより、以前に入力したフィールドをクリアできなくなります。

つまり、タブ、Enter、またはマウスのクリックを押すと、テキスト入力の値がユーザー名に設定され、非表示の入力がユーザー ID に設定され、次のテキスト入力がフォーカスされます。

これは、コンテキストで問題を説明/説明するためのインラインコメント付きの JSFiddle です: http://jsfiddle.net/shipstar/Jvfx3/4/

ありがとう！

4

2 に答える 2

1

フォーカス ロジックをclose イベント内に移動し、value updater をselect イベント内に移動します。

http://jsfiddle.net/Jvfx3/6/

select: function (event, ui){
    var $userIdField = $(this).siblings(".user-id");
    var userId = ui.item ? ui.item.userId : '';
    $userIdField.val(userId);

    $(this).siblings('label').find('span').text(userId);
},
close: function(event, ui){
    if (!event.keyCode || event.keyCode === 13){
        $(this).parents('form').find('.user-name').filter(function (){
            return $(this).val() === '';
        }).first().focus();
    }
}
于 2013-07-30T20:51:10.180 に答える