下拉自动完成与 onclick 冲突 - MVC答案

【问题标题】：Dropdown Autocomplete clashes with onclick - MVC下拉自动完成与 onclick 冲突 - MVC
【发布时间】：2021-01-07 21:03:40
【问题描述】：

这是我的 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" />

【问题讨论】：

自动完成和模态都不是定义的函数。代码块中缺少导入？
@ShanerM13 对不起，我不明白你的意思，不过我会查一下。谢谢
@Ryan Wilson 先生，谢谢您的回答，但我的问题完全错误，我会编辑它。我想要的是能够从下拉列表中进行选择。我道歉
@LadySari 不客气。很高兴能提供帮助。
@LadySari 你能检查一下下面的 kblau 答案吗

标签： javascript jquery asp.net-mvc

【解决方案1】：

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>

【讨论】：