CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvcrazor
cedPound
cedPound

Reputation: 377

How to add a clear button in jquery autocomplete(mvc razor)

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

Upvotes: 0

Views: 988

Answers (2)

Ankit Lad
Ankit Lad

Reputation: 41

please try using this

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

Upvotes: 0

David Novotn&#253;
David Novotn&#253;

Reputation: 31

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

Upvotes: 1

Related Questions