2

ある入力フィールドでオートコンプリートを使用して、別の入力フィールドに入力しています。

<input id='fruit' name='fruit' type='text'>
<input id='details' name='details' type='text'>

jQuery コード:

var x = ["apple", "kiwi", "lemon"];

$( "#fruit" ).autocomplete({
     source: x
});

jQuery(document).on("change","#fruit", function()
{
    $.each(x, function(key, value) {

        switch(value) {
            case "apple":
                $('#details').val("Delicious");
                break;
            case "kiwi":
                $('#details').val("Yummy");
                break;
            case "lemon":
                $('#details').val("Sour");

        }
    });
});

誰かがオートコンプリートでリンゴ、キウイ、またはレモンを選択すると、他の入力フィールドに対応するテキストが入力されます。

2 つの問題があります。

  1. 現在、常に「酸っぱい」と出力されます
  2. オートコンプリートからエントリを選択すると、もう一度クリックしてフィールドに入力する必要があります。誰かがオートコンプリートから選択肢を選択したときにこれを行う方法はありますか?

ここにフィドルがあります

4

3 に答える 3

5

スイッチを使用すると、物事が少し難しくなると思います。UI のドキュメントを見ると、オブジェクトの配列を使用できることがわかります。私があなただったら、ソースを次のように置きます：

var x = [
    { label : 'apple', value : 'Delicious' },
    { label : 'kiwi', value : 'Yummy' },
    { label : 'kiwiooo', value : 'aaa' },
    { label :  'lemon', value : 'Sour' }
];

これで、スイッチやその他のものを使用せずに、特定のラベルに対して特定の値があることがわかったので、残りのコードは次のようになります

$( "#fruit" ).autocomplete({
    source: x,
    focus : function(){ return false; }
})
.on( 'autocompleteresponse autocompleteselect', function( e, ui ){
  var t = $(this),
      details = $('#details'),
      label = ( e.type == 'autocompleteresponse' ? ui.content[0].label :  ui.item.label ),
      value = ( e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value );

  t.val( label );
  details.val( value );

  return false;
});

focusユーザーがキーボードの矢印でリストを下にスライドすることを選択した場合、#fruit入力に値が表示され、これは問題ないため、 return false をオンにします。

ここでいろいろ遊べます

于 2013-06-19T22:20:53.453 に答える
0

変更ハンドラ内の each ループは必要ありません。入力の値を使用するだけです。

$(document).on("change","#fruit", function()
{
    switch($('#fruit').val()) {
        case "apple":
            $('#details').val("Delicious");
            break;
        case "kiwi":
            $('#details').val("Yummy");
            break;
        case "lemon":
            $('#details').val("Sour");

    }
});

このコードは、ハンドラーの呼び出しごとに実行しないことで改善できますが$('#fruit')、問題は解決します。

于 2013-06-19T21:38:05.207 に答える