Displaying PartialView when user enters text? Like an Autocomplete feature? - asp.net

Question

I've watch the videos on asp.net and I've looked online and have found nothing.
I have a search box on a site, that searches for recipes. Each recipe has a what you're making image, a title, and type(dessert, lunch, dinner).
All of these items are in a DataService, which I can query against and get a list of the items they are searching for.
Now I'm using VB's ASP.NET MVC3 w/ Razors for the site and I'm trying to get some auto completeness going on when the user enters text.
What should happen is when the user enter text, it will call an ActionResult in the Search Controller. Which queries the DataService and puts all the search results in a model. With that model I return a PartialView, results, with the Model included.
And it should display that partial view, but when the users deletes all the text I will remove the partial view.
Here's what I implemented. In the Layout View
#Code
Using Ajax.BeginForm("FastSearchResults", "Search", "", New AjaxOptions With {.UpdateTargetId = "searchitems", .HttpMethod = "GET", .InsertionMode = InsertionMode.Replace})
Html.BeginForm("Results", "Search", FormMethod.Get)
#<input type="text" name="id" id="searchbox" data-autocomplete="#Url.Action("FastSearchResults", "Search")" class="recipevox" value="Search Movie Title or Actor Here" />
Html.EndForm()
End Using
End Code
<span id="searchitems"></span>
The FastResult Method
Function FastSearchResults(ByVal id As String) As ActionResult
Dim model = search.FastSearch(id)
Return PartialView("_FastSearchResults", model)
End Function
Javascript Code
$(document).ready(function () {
$(":input[data-autocomplete]").autocomplete({ source: $(this).attr("data-autocomplete") }); });
I curious as to why this doesn't work, what else am I missing?

Answer 1

Your FastSearchResults controller action returns a partial view which presumably contains HTML. The autocomplete plugin doesn't expect HTML. It expects text or JSON. So to make this work you could have a different controller action specifically for the autocomplete:
<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
' TODO: Query your service and return a list of model containing Id and Value properties
Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
Return Json(model)
End Function
and then setup your autocomplete:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").autocomplete({
source: function (request, response) {
$.ajax({
url: this.element.attr('data-autocomplete'),
type: 'POST',
data: { id: request.term },
success: function (result) {
response(
$.map(result, function (item) {
return {
// Here we must map between the server side JSON
// and the autocomplete expected format
label: item.Value,
id: item.Id
};
})
);
}
});
},
minLength: 2
});
});
</script>
As far as the other controller action which returns a partial view you could keep it and it will be executed when the form is submitted using AJAX and the results of it will be injected into the #searchitems div.