如何在 jquery 自动完成（mvc razor）中添加清除按钮答案

【问题标题】：How to add a clear button in jquery autocomplete(mvc razor)如何在 jquery 自动完成（mvc razor）中添加清除按钮
【发布时间】：2017-08-04 10:23:35
【问题描述】：

我有一个搜索功能，它已经通过搜索用户请求的数据来工作。我想为用户添加一个清除按钮，以便能够清除搜索栏，此时用户必须使用“退格”按钮清除搜索，然后按“回车”返回包含所有数据的页面。我是前端专家，所以在此先感谢您的帮助。

Javascript

   $(function () {
        $("#SearchString").autocomplete({
            source: '@Url.Action("GetUserJSON")',
            minLength: 1

        })
    });

    $(function () {
        $("#SearchString").focus();
    });



    $(function () ) {
        $("#clearbutton").click(function () {
            $('#SearchString').autocomplete('close');
        });
    };

剃刀 HTML

   @using (Html.BeginForm("Index", "User", FormMethod.Get, null))
    {
        <div class="search-wrap">
            @Html.TextBoxFor(m => m.SearchString, new { id = "SearchString", @class = "lookup txt-search js-autocomplete-submit", @placeholder = "Search", @type ="search" })
            @*<img  src="~/Content/Images/close.png" id ="closebutton"/>*@ 
            <button type="button"  id="clearbutton">Click Me!</button>
            <i onclick="submitform()" class="btn-search fa fa-search"></i>
        </div>        
    }

从中获取数据的 C# 类

  public JsonResult GetUserJSON(string term)
    {
        var stores = (from st in UserLogic.GetUserIndex(1, term).IndexList
                      select new { st.Username, st.FirstName, st.LastName }).ToList();

        List<String> returnList = new List<string>();

        foreach (var item in stores)
        {
            if (item.Username.ToString().ToUpper().StartsWith(term.ToUpper()))
            {
                returnList.Add(item.Username.ToString());
            }
            else if (item.FirstName.ToUpper().Contains(term.ToUpper()))
            {
                returnList.Add(item.FirstName);
            }
            else if (item.Username.ToUpper().Contains(term.ToUpper()))
            {
                returnList.Add(item.Username);
            }             
        }

        returnList = returnList.Distinct().OrderByAlphaNumeric(s => s).ToList();
        return Json(returnList, JsonRequestBehavior.AllowGet);
    }

【问题讨论】：

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

我认为这是你需要的：

    $(function () {
            $("#clearbutton").click(function () {
                $('#SearchString').autocomplete('close');
                $("#SearchString").val("")
            });
    });

将$("#SearchString").val("") 添加到您的清除按钮点击事件中

编辑：你打错了 clearSearch 的函数

这是working example

【讨论】：

感谢您的建议，我已经尝试了上述方法，但仍然没有发生任何事情，请继续尝试解决方案

【解决方案2】：

请尝试使用这个

$("#clearbutton").click(function () {
        $('#SearchString').autocomplete('close').val('');
    });

【讨论】：