如何在jquery自动完成中查看标签和提交id答案

【问题标题】：How to view label and submit id in jquery autocomplete如何在jquery自动完成中查看标签和提交id
【发布时间】：2014-04-28 06:25:45
【问题描述】：

我有一个使用 jquery 自动完成的搜索字段。在此文本框中，下拉自动完成建议的员工姓名列表。但是当我提交表单时，我不希望将人名与表单一起发送，我想要与表单一起发送的员工 ID。我该怎么做？

$( "#tags" ).autocomplete({
source: array
});

这是我使用的脚本。数组看起来像

  array= [{"a",1},{"b",2},{"c",3}.........]

请帮助我。在此先感谢。

【问题讨论】：

标签： jquery ruby-on-rails-4 jquery-autocomplete

【解决方案1】：

尝试像这样使用 JSON 对象

array = [
     {label: "a", value: 1},
     {label: "b", value: 2}
]

字段将其标记为用户将看到的文本和值 - id。您也可以使用其他文件，例如category、desc、icon

【讨论】：

【解决方案2】：

如果自动完成文本框中有多个值，则需要将其存储在数组中并通过服务器端传递

var ids = [];
$('#id').autocomplete({

select: function( event, ui ) {
 ids.push( ui.item.value );
});

});

ids 数组将包含所有选定的员工 id，同样，如果用户从自动完成文本框中取消选择员工，您也必须从该数组中删除此 id

【讨论】：

【解决方案3】：

DEMO

JS代码：

var data = {
    json: "{\"employee\":[{\"value\":\"A\",\"id\":\"1\"},{\"value\":\"B\",\"id\":\"2\"},{\"value\":\"C\",\"id\":\"3\"}]}"
}


$(function () { 

$('#submit').click(function(){
    alert('Employee name = '+$('#employee_name').val()+' Employee id = '+$('#employee_id').val());    
});   

    $.ajax({
        url:"/echo/json/",
        data: data,
        type: "POST",
        success:function(data) {
            console.log(data);
            var arr = data.employee;
            $("#employee_name").autocomplete({
                minLength: 0,
                source: arr,
                select: function (event, ui) {
                    $("#employee_name").val(ui.item.value);
                    $("#employee_id").val(ui.item.id);
                    return false;
                }
            });
        }
    });
});

HTML 代码：

<form>
    Employee name (Type like "A" or "B" or "C")<br>
    <input id="employee_name" name="employee_name">
    <br>
    Selected Employee id (hidden field):        
    <input type="text" id="employee_id" name="employee_id" readonly>
    <br>    
    <input type="button" value="Submit" name="submit" id="submit" onclick="check_fields()">

【讨论】：