Question

I found this example online and it was perfectly fine but I’d like to know how to store (hidden) the employeeID, so it can be used later on the server side.

Thank you

<script type="text/javascript">
    $(function() {
        $(".tb").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1
        });
    });
</script>

Answer 1

The autocomplete has a change event which is fired when the field is blurred if the value has changed. You need to bind an event handler to this event and then set a hidden field within that event handler.

So

 $(".tb").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1,
            change : function (event,ui) {
                     $("#hdnEmpId").val(ui.item.value);
            }
        });

You will have to figure out how you want to implement the change event handler. You can read more about that at http://jqueryui.com/demos/autocomplete/#event-change

Hope this helps!