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!
