如何在jQuery自动完成中添加清除按钮（MVC剃刀）

Question

I have a search functionality which already works by searching the data that the user requests. I would like to add a clear button for the user to be able to clear the search bar, at the moment the user has to clear the search using the "backspace" button and press "enter to go back the page with all the data. I am a expert in front end so would appreciate some help thank you in advance.

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# Class where data get pull from

  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

I think this is what you need:

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

Add $("#SearchString").val("") to your clearbutton click event

Edit: You have mistyped the function for clearSearch

this is working example

Answer 2

please try using this

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