Friday, July 22, 2011
Autocompletion Textbox in MVC Using jQuery
jQuery is awesome. If you haven't started looking at it, I highly recommend that you do. It works wonders in the ASP.NET MVC world. One of the best things about jQuery is the enormous number of plug-ins that are available for adding even more functionality to the library.
The plug-in that I am going to be talking about in this post is jQuery Autocomplete.
So let's make a autocomplete text box in MVC for adding tags (or labels) for a blog post. First, we are going to need to put a text box in one of our views with the name "tags".
1: <div>2: <%= Html.TextBox("postTags") %>
3: </div>Now, in the same view (or the master page) we need to add the references for jQuery Autocomplete. The plug-in also comes with a stylesheet for styling the drop-down that will contain the autocomplete options.
1: <link href="/Content/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" />
2: <script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
3: <script type="text/javascript" src="/Scripts/jquery.autocomplete.js"></script>
Next, we need to create a controller action that will return the list of autocomplete values in the JSON format.
1: [HandleError]2: public class UtilitiesController : Controller
3: {4: /// <summary>
5: /// This action method looks up the tags.
6: /// </summary>
7: /// <param name="q">The query that contains the user input.</param>
8: /// <param name="limit">The number of tags return.</param>
9: public ActionResult LookupTags(string q, int limit)
10: {11: // We can get a list of tags from the database, but
12: // for this example, I will populate a list with values.
13: List<string> tags = new List<string>();
14: tags.Add("asp");
15: tags.Add("mvc");
16: tags.Add("microsoft");
17: tags.Add("sql server");
18: tags.Add("jQuery");
19: tags.Add("ajax");
20: 21: // Select the tags that match the query, and get the
22: // number or tags specified by the limit.
23: var retValue = tags 24: .Where(x => x.StartsWith(q)) 25: .OrderBy(x => x) 26: .Take(limit)27: .Select(r => new { Tag = r });
28: 29: // Return the result set as JSON
30: return Json(retValue);
31: } 32: }Finally, we have to add the jQuery Autocomplete initialization script in the view (or master page) to wire up the plug-in to the text box. Notice in line 4 that we are using a the action method that we created above to get the list of tags.
1: <script type="text/javascript">
2: $(document).ready(function() 3: {4: $("#postTags").autocomplete('<%=Url.Action("LookupTags", "Utilities") %>',
5: {6: dataType: 'json',
7: parse: function(data) 8: {9: var rows = new Array();
10: for (var i = 0; i < data.length; i++)
11: {12: rows[i] = { data: data[i], value: data[i].Tag, result: data[i].Tag };
13: }14: return rows;
15: }, 16: formatItem: function(row, i, max) 17: {18: return row.Tag;
19: }, 20: width: 300,21: highlight: false,
22: multiple: true,
23: multipleSeparator: ","
24: }); 25: }); 26: </script>The documentation for the plug-in details all of the various options that can be used in the autocomplete function.
Now we have an AJAX enabled autocomplete box using jQuery in ASP.NET MVC.
The power of jQuery never ceases to amaze me. There will likely be plenty more posts to come on the topic of using jQuery in MVC.
--
Thank you.
http://blogs.msdn.com/b/miah/archive/2008/11/13/autocompletion-textbox-in-mvc-using-jquery.aspx
No comments:
Post a Comment