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

迪内什·G（Dinesh G）

例如

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

<input id="tags" name="name">
<input id="tags_code" name="code">

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

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

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

耶尔达·库曼加利耶夫（Yeldar Kurmangaliyev）

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

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

这是工作中的JSFiddle演示。

实际上，当您提供时，jQuery UI允许您使用带有value和label属性的对象数组source。
因此，类似这样的方法将更好地工作：

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演示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。