How to get selected value in textbox Autocomplete

How to get selected value in textbox Autocomplete

Hi all,

Autocomplete is working fine displaying Name and images everything is fine but when i click or select an item
from the autocomplete list the selected name or value dose not select in TextBox.

Code as follow:

HTML
  1. <input type="text" id="txtSearch" style="width: 80%" />

JS
  1. <link href="Styles/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
  2. <script type="text/javascript" language="javascript">
            $(function () {
                $('#txtSearch').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "GetProductService.asmx/GetProductName",
                            data: "{'ProductName': '" + request.term + "'}",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                var errorMsg = "There is a problem processing your request !!";
                                alert(errorMsg);
                            }
                        });
                    },
                    search: function (e, u) {
                        $(this).addClass('loader');
                    },
                    response: function (e, u) {
                        $(this).removeClass('loader');
                    },
                    create: function (event, ui) {
                        $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                        return $('<li>')
                        .append("<img src=" + item.ImagePath + " alt='img' style='width: 50px; height: 50px;' />")
                        .append("<a style='font-size: 16px; color: #000; position: absolute; margin: 5px;'>" + item.ProductName +
                             '<span style="margin: 15px;">' + '( ' + item.Year + ' )' + "</a>")
                        .appendTo(ul);
                      };
                    },select: function (event, ui) { $('#txtSearch').val(ui.item.val);
  3. }
  4.  });
            });
        </script>



Thanx in advance
Regards