Search method issue

Question

I'm using MVC 5, C# and I'm trying to build a search filter that will filter through upon each key stroke. It works as so, but the textbox erases after submitting. Now this is probably not the best approach to it either. Is there a way to make so when it posts it doesn't erase the textbox, or better yet, is there a better alternative?

    @using (Html.BeginForm("Index", "Directory", FormMethod.Post, new { id = "form" }))
    {
       <p>
          Search Employee: <input type="text" name="userName" onkeyup="filterTerm(this.value);" />


       </p>

    }



<script>
    function filterTerm(value) {
        $("#form").submit();
        event.preventDefault();
    }
</script>

Answer 1

A better way is to ditch your Html.BeginForm (unless you actually need it for something else) and use a pure ajax method of getting the data.

So your modified html would be:

<p>
    Search Employee:
    <input type="text" name="userName" onkeyup="filterTerm(this.value);" />
</p>

<script>
    function filterTerm(value) {
        $.ajax({
            url: '@Url.Action("Index", "Directory")',
            data: {
                searchTerm: value
            },
            cache: false,
            success: function (result) {
                //do something with your result,
                //like replacing DOM elements
            }
        });
    }
</script>

You also need to change the action that ajax will be calling (and I have no idea why you are calling the "Index" action).

public ActionResult Index(string searchTerm)
{
    //lookup and do your filtering

    //you have 2 options, return a partial view with your model
    return PartialView(model);

    //or return Json
    return Json(model);
}

The best thing about this ajax is there is no posting and it's async, so you don't have to worry about losing your data.

Answer 2

I agree with the comments on your question. Posting on every key stroke would be a frustrating user experience.

So, two answers, use ajax to perform the search (which will then keep the value since the whole page will not post) or have a submit button and name the input the same as the controller action parameter.

Controller code (used with your existing code):

public class DirectoryController : Controller 
{
    [HttpPost()]
    public ActionResult Index(string userName) 
    { 
        // make the input argument match your form field name.

        //TODO: Your search code here.

        // Assuming you have a partial view for displaying results.
        return PartialView("SearchResults"); 
    }
}

View Code (to replace your code with Ajax):

<p>
    Search Employee:@Html.TextBox("userName", new { id = "user-name-input" })
</p>
<div id="results-output"></div>

<script type="text/javascript">
$("#user-name-input").change(function(e) {
    $.ajax({
        url: '@Url.Action("Index", "Directory")'
        , cache: false
        , type: "post"
        , data: {userName: $("#user-name-input").val() }
    }).done(function (responseData) {
        if (responseData != undefined && responseData != null) { 
            // make sure we got data back
            $("#results-output").html(responseData);
        } else {
            console.log("No data returned.");
            alert("An error occurred while loading data.");
        } // end if/else
    }).fail(function (data) {
        console.log(data);
        alert("BOOOM");
    });
}
</script>