Question

我有一个搜索功能，它已经可以通过搜索用户请求的数据来工作。我想为用户添加一个清除按钮，以便能够清除搜索栏，此时用户必须使用＆＃34;退格＆＃34;清除搜索。按钮并按＆＃34;进入以返回包含所有数据的页面。我是前端的专家，所以希望得到一些帮助，提前感谢你。

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

Answer 2

请尝试使用此

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

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

2 个答案: