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!