c# - Search method issue -

c# - Search method issue -

i'm using mvc 5, c# , i'm trying build search filter filter through upon each key stroke. works so, textbox erases after submitting. not best approach either. there way create when posts doesn't erase textbox, or improve yet, there improve 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>

i agree comments on question. posting on every key stroke frustrating user experience.

so, 2 answers, utilize ajax perform search (which maintain value since whole page not post) or have submit button , name input same controller action parameter.

controller code (used existing code):

public class directorycontroller : controller { [httppost()] public actionresult index(string username) { // create input argument match form field name. //todo: search code here. // assuming have partial view displaying results. homecoming partialview("searchresults"); } }

view code (to replace code 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) { // create sure got info $("#results-output").html(responsedata); } else { console.log("no info returned."); alert("an error occurred while loading data."); } // end if/else }).fail(function (data) { console.log(data); alert("booom"); }); } </script>

c# forms asp.net-mvc-5 onkeyup