I\'ve got a problem with my jQuery autocomplete field. Its some kind of strange.
This is my autocomplete field and script. The response from my mvc function works fine.
One thing that seems wrong with the code you have shown is the fact that you have included the jquery-ui
script twice (the minified and standard versions). You should have only one:
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
$(function () {
var getData = function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetMultiProductList",
data: "{'term':'" + $("#txtAutoCompleteMulti").val() + "'}",
dataType: "json",
success: function (data) {
response($.map(data.d, function (item) {
if (item != null)
return { label: item.label, title: item.value }//value: item.label,
}))
},
error: function (result) {
alert("Error");
}
});
};
var selectItem = function (event, ui) { $("#txtAutoCompleteMulti").val(ui.item.value); return false; }
$("#txtAutoCompleteMulti").autocomplete({
source: getData,
select: selectItem,
_resizeMenu: function () {
this.menu.element.outerWidth(500);
},
search: function (event, ui) { },
minLength: 1,
change: function (event, ui) {
if (!ui.item) {
$('#txtAutoCompleteMulti').val("")
}
},
select: function (event, ui) {
$("#txtAutoCompleteMulti").prop('title', ui.item.title)
},
autoFocus: true,
delay: 500
});
});
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.ui-autocomplete-loading {
background: url('img/Progress_indicator.gif') no-repeat right center;
}
.seachbox {
border: 1px solid #ccc;
border-radius: 4px;
width: 250px;
padding: 6px 25px 6px 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div>
<table style="width: 100%;">
<tr>
<td style="width: 20%">Product Name :</td>
<td>
<input type="text" id="txtAutoCompleteMulti" placeholder="Seach Product" class="seachbox" />
</td>
</tr>
</table>
</div>
c# code using webmethod