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
- <input type="text" id="txtSearch" style="width: 80%" />
JS
- <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>
-
<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);
-
}
-
-
});
});
</script>
Thanx in advance
Regards