如何在自动完成文本框jquery中使用数组？

例如

    $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp"]; var availableTagsCode = ["1", "2", "3"]; $( "#tags" ).autocomplete({ source: availableTags }); });    

实际上，我尝试使用以下代码选择建议时更改代码：

 $("#tags_code").val(availableTagsCode); 

我需要选择建议测试，如果我将从标签中选择第0个数组，第0个代码应分配给name="code"文本框。
请帮我解决这个问题。

Answer 1

您可以定义一个select事件处理程序：

 $( "#tags" ).autocomplete({ source: availableTags, select: function(event, ui) { var index = availableTags.indexOf(ui.item.value); $("#tags_code").val(availableTagsCode[index]); } }); 

这是工作的JSFiddle演示 。

实际上，jQuery UI允许您在提供source时使用具有value和label属性的对象数组。
所以，像这样的东西会起作用并且看起来更好：

 var tags = [ {"label": "ActionScript", "value": 1}, {"label": "AppleScript", "value": 2}, {"label": "Asp", "value": 3} ]; $( "#tags" ).autocomplete({ source: tags, select: function (event, ui) { $("#tags_code").val(ui.item.value); } }); 

第二种方法的JSFiddle演示 。

如果您不希望在选择后替换值，则可以使用自定义属性而不是value ：

 var tags = [ {"label": "ActionScript", "code": 1}, {"label": "AppleScript", "code": 2}, {"label": "Asp", "code": 3} ]; $( "#tags" ).autocomplete({ source: tags, select: function (event, ui) { $("#tags_code").val(ui.item.code); } }); 

JSFiddle演示 。

Answer 2

设置select事件处理程序

 $(function() { var availableTags = ["ActionScript", "AppleScript", "Asp"]; var availableTagsCode = ["1", "2", "3"]; $("#tags").autocomplete({ source: availableTags, select: function(e, ui) { $('#tags_code').val(availableTagsCode[availableTags.indexOf(ui.item.value)]); } }); });