16100
Question:
i have used a ready made code and implement it in my project. now that code is working fine in one textbox and it is also get output. when i use it for another text box it was get the result from server side but somehow it wont display in client side.
@model IEnumerable<UMS.Models.UserDetail>
....
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.9.0.min.js"></script>
....
@using (Html.BeginForm("Index", "UserDetails", FormMethod.Get))
{
@Html.TextBox("SearchName", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Name", id = "txtUserName" })
@Html.TextBox("SearchEmail", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Email", id = "txtEmail" })
@Html.DropDownList("SearchDesignation", ViewBag.DesignationList as SelectList, "Select", new { @class = "control-label col-md-2", Style = "margin-right: 10px; margin-top: 5px; height: 32px;" }) <input type="submit" value="Search" onclick="location.href='@Url.Action("Index", "Users")'" />
}
<table class="table">
....
</table>
<script type="text/javascript">
$("#txtUserName").keypress(function () {
$("#txtUserName").autocomplete({
source: function (request, response) {
$.ajax({
url: "/UserDetails/SearchName",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
$("#txtEmail").keypress(function () {
$("#txtEmail").autocomplete({
source: function (request, response) {
$.ajax({
url: "/UserDetails/SearchEmail",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
</script>
above is my code for that. here i have attach two images. In one image you can see the result while in other only dot is display<a href="https://i.stack.imgur.com/lYqrC.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/lYqrC.png" data-original="https://i.stack.imgur.com/lYqrC.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a><a href="https://i.stack.imgur.com/0WEn2.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/0WEn2.png" data-original="https://i.stack.imgur.com/0WEn2.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
Answer1:You shouldn't write initialization code in events that occurs multiple times. Every time the event occurs it just re-initializes the widget instead of letting it do it's work. Your code should be:
<pre class="lang-js prettyprint-override">$("#txtUserName").autocomplete({
source: function(request, response) {
$.ajax({
url: "/UserDetails/SearchName",
type: "POST",
dataType: "json",
data: {
Prefix: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.Name,
value: item.Name
};
}))
}
})
},
messages: {
noResults: "",
results: ""
}
});
Answer2:You can test it after success
$(document).unbind('keypress');
