javascript - 如何在jquery自动完成中添加清除按钮(mvc razor)

Question

我有一个搜索功能，该功能已经可以通过搜索用户请求的数据来工作。我想添加一个清除按钮，以便用户能够清除搜索栏，目前用户必须使用“退格”按钮清除搜索，然后按“输入”返回包含所有数据的页面。我是前端专家，因此希望得到一些帮助，提前谢谢您。

Javascript

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

        })
    });

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



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

Razor 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);
    }

Answer 1

我认为这就是您所需要的:

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

将 $("#SearchString").val("") 添加到您的clearbutton点击事件

编辑:您输错了clearSearch 的函数

这是working example