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

我在一个输入字段上使用自动完成function来填充另一个输入字段：

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

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

你可以在这里玩东西

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