Simple Interactive Search with jQuery and ASP.Net MVC
- by Doug Lampe
Google now has a feature where the search updates as you type in the search box. You can implement the same feature in your MVC site with a little jQuery and MVC Ajax. Here's how:
Create a javascript global variable to hold the previous value of your search box.
Use setTimeout to check to see if the search box has changed after some interval. (Note: Don't use setInterval since we don't want to have to turn the timer off while Ajax is processing.)
Submit the form if the value is changed.
Set the update target to display your results.
Set the on success callback to "start" the timer again. This, along
with step 2 above will make sure that you don't sent multipe requests until the
initial request has finished processing.
Here is the code:
<script type="text/javascript">
var searchValue = $('#Search').val();
$(function () {
setTimeout(checkSearchChanged, 0.1);
});
function checkSearchChanged() {
var currentValue = $('#Search').val();
if ((currentValue) && currentValue != searchValue && currentValue != '') {
searchValue = $('#Search').val();
$('#submit').click();
}
else {
setTimeout(checkSearchChanged, 0.1);
}
}
</script>
<h2>Search</h2>
<% using
(Ajax.BeginForm("SearchResults", new AjaxOptions { UpdateTargetId = "searchResults", OnSuccess = "checkSearchChanged" }))
{ %>
Search: <% = Html.TextBox("Search", null, new { @class = "wide" })%><input id="submit" type="submit" value="Search" />
<% } %>
<div id="searchResults"></div>
That's it!
