jquery 自动完成填充另一个字段

Question

我在一个输入字段上使用自动完成功能来填写另一个输入字段:

<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");

        }
    });
}); 

当有人使用自动完成功能选择苹果、猕猴桃或柠檬时，它会用相应的文本填写另一个输入字段。

我有两个问题:

1. 目前它总是打印出“Sour”
2. 当您从自动填充中选择一个条目时，您必须再次单击以填写该字段。当有人从自动完成中选择一个选项时，有办法做到这一点吗？

这是一个 fiddle

Answer 1

我猜使用 switch 会让事情变得有点困难。如果您查看 ui 文档，您会发现可以使用对象数组。如果我是你，我会这样放置源代码:

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

现在您知道对于某个标签，您有某个值，无需使用 switch 和其他东西，因此其余代码将如下所示

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

我将 return false 放在 focus 上，因为如果用户选择使用键盘箭头在列表上向下滑动，在 #fruit 输入中将出现该值，这是不行的。

你可以玩东西right here