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

        }
    });
});

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

我有两个问题：

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

这是一个小提琴

4

3 回答 3

5

我猜你使用 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输入中会出现这个值，这是不行的。

你可以在这里玩东西

于 2013-06-19T22:20:53.453 回答
0

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

$(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 回答
0

您可以使用自动完成的更改：

$('#fruits').autoceomplete({ source: x,
change: function (event, ui) {
        switch(ui.item){
              case 'apple': break;
              case 'kiwi': break;
        }
}})
于 2013-06-19T22:12:39.607 回答