jquery autocomplete中如何显示label并提交label对应的id答案

【问题标题】：In jquery autocomplete, how to disply label and submit the id corresponding to labeljquery autocomplete中如何显示label并提交label对应的id
【发布时间】：2014-07-14 16:23:24
【问题描述】：

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

<input id="employee">
<input type="hidden" id="employee_id">

以上是我使用的文本字段

$(function () {
    $.ajax({
        url: '/accounts/allEmp',
        type: "get",
        cache: false,
        success: function (data) {
            var arr = [];
            arr = data.employee;
            $("#employee").autocomplete({
                minLength: 0,
                source: arr,
                focus: function (event, ui) {
                    $("#employee").val(ui.item.name);
                    return false;
                },
                select: function (event, ui) {
                    $("#employee").val(ui.item.name);
                    $("#employee_id").val(ui.item.id);
                    return false;
                }
            })
                .data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $("<li>")
                        .append("<a>" + item.name)
                        .appendTo(ul);
            };
        }
    });
});

这是我使用的脚本。当我在文本字段中输入字符时，它不会显示任何结果，但是当从文本字段中删除这些字符时，它将显示所有实体（排序不起作用）。数组看起来像

array="employee": 
[ { "name": "a", "id": 1 }, 
{ "name": "b", "id": 2 },
{ "name": "c", "id": 3 } ]

请帮助我。在此先感谢。

【问题讨论】：

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

【解决方案1】：

您控制源网址的服务器端吗？如果是这样，我建议您使用"value" 属性名称而不是"name"，如autocomplete api 中所述。否则，您可以就地修改该数组并即时添加 "value" 属性。

这里是 fiddle 我刚刚从你的 sn-p 创建的。单击“发送”会崩溃，我不知道为什么，但是如果您查看开发人员的面板，网络请求正在通过参数处理：

employee[name]:Fred
employee[id]:first

【讨论】：

【解决方案2】：

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

【讨论】：