In jquery autocomplete, how to disply label and submit the id corresponding to label

Question

I have a search field which use jquery autocomplete.In this textbox that drops down a list of employee names suggested by the autocomplete.But when my form is submitted I don't want the persons name sent along with form, I want the employee id sent with the form.How I can do that?

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

Above given is the textfield I used

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

This is the script I used.While I entering characters in the textfield it doesn't show any results but when remove those characters from textfield it will show all the entities(sorting is not working).And the array look like

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

Please help me.Thanks in advance.

Answer 1

Do you control server side of source url? If so I suggest you use "value" property name instead of "name" as described in autocomplete api. Otherwise you can modify that array in place and add "value" properties on the fly.

Here is fiddle I just created from your snippet. With click on "send" it crashes I don't know why but if you look in your developer's panel network request is getting through with params:

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

Answer 2

DEMO

JS code:

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 code:

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