如何解决下拉自动完成与 onclick 冲突 - MVC
这是我的 onclick 事件，每次我调用它时，我的 .autocomplete 都不起作用。解释会有所帮助
$('#txtRecipient').on('click',function () {
alert("Im being called");
//call another view
//$('#inBoxModal').modal('show');
});
$(function () {
$("#txtRecipient").autocomplete({
source: function (request,response) {
$.ajax({
url: '/Send/AutoComplete/',data: "{ 'username': '" + request.term + "'}",dataType: "json",type: "POST",contentType: "application/json; charset=utf-8",success: function (data) {
response($.map(data,function (item) {
return {
label: item.UserName,value: item.UserID
//+ "," + item.UserName,};
}));
},error: function (response) {
alert(response.responseText);
},failure: function (response) {
alert(response.responseText);
}
});
},select: function (e,i) {
e.preventDefault();
$("#txtUserID").val(i.item.value);
$("#txtRecipient").val(i.item.label);
//alert(i.item.value);
},minLength: 1
}).focus(function () {
//$(this).autocomplete("search");
});
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="txtRecipient" type="text" />解决方法
https://dotnetfiddle.net/GdUKsG
控制器/视图模型：
public class AnItem
{
public string UserName { get; set; }
public string UserID { get; set; }
}
[HttpPost]
public ActionResult GetAutoComplete(string username)
{
//creating return data
List<AnItem> list = new List<AnItem>();
list.Add(new AnItem { UserName = username + username + "label1",UserID = username + username + "value1" });
list.Add(new AnItem { UserName = username + username + "label2",UserID = username + username + "value2" });
list.Add(new AnItem { UserName = username + username + "label3",UserID = username + username + "value3" });
return Json(list,JsonRequestBehavior.AllowGet);
}
public ActionResult Index25()
{
return View();
}
查看：
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@*<link rel="stylesheet" href="/resources/demos/style.css">*@
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$('#txtRecipient').on('click',function () {
alert("Im being called");
});
$("#txtRecipient").autocomplete({
source: function (request,response) {
$.ajax({
url: '@Url.Action("GetAutoComplete","Home")',data: "{ 'username': '" + request.term + "'}",dataType: "json",type: "POST",contentType: "application/json; charset=utf-8",success: function (data) {
response($.map(data,function (item) {
return {
label: item.UserName,value: item.UserID
};
}
));
},error: function (response) {
alert(response.responseText);
},failure: function (response) {
alert(response.responseText);
}
});
},select: function (e,i) {
e.preventDefault();
$("#txtUserID").val(i.item.value);
$("#txtRecipientShow").val(i.item.label);
},minLength: 1
}).focus(function () {
});
});
</script>
</head>
<body>
<div>1. Click inside the Recipient text</div>
<div>2. You will get a popup as expected</div>
<div>3. Click OK and your cursor will still be in Recipient</div>
<div>4. Now type the letter a</div>
<div>5. Choose the second autocomplete</div>
<div>6. Your cursor is still in Recipent but mouse click this field</div>
<div>7. You will get a popup as expected</div>
<div>8. You can repeat</div>
<div class="ui-widget">
<label for="txtRecipient">Recipient: </label>
<input id="txtRecipient">
</div>
<p class="alert alert-danger" id="errorMessage" style="display:none">@ViewBag.errormessage</p>
<table>
<tr>
<td>
Selected values
</td>
</tr>
<tr>
<td><input type="text" id="txtRecipientShow" /></td>
<td><input type="text" id="txtUserID" /></td>
</tr>
</table>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
