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. 目前它总是印出"酸"
2. 从自动填充中选择条目时,您必须再次单击以填写该字段.当有人从自动填充中选择一个选项时,有没有办法做到这一点？

这是一个小提琴

Answer 1

我猜你使用开关有点困难.如果您查看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;
});

我把return false设置为false,focus因为如果用户选择使用键盘箭头在列表上向下滑动,则在#fruit输入中将显示该值,这不是正常的.

你可以在这里玩一些东西