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

        }
    });
});

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

我有两个问题：

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

这是 fiddle

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

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

你可以玩right here

Answer 2

您不需要或不需要更改处理程序中的每个循环。只需使用您输入的值。

$(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')来改进此代码，但它可以解决您的问题。

Answer 3

您可以使用自动填充更改：

$('#fruits').autoceomplete({ source: x,
change: function (event, ui) {
        switch(ui.item){
              case 'apple': break;
              case 'kiwi': break;
        }
}})

jquery自动填充以填写另一个字段

3 个答案: