On a ASP.NET MVC project I am currently working on I have implemented Remy's jQuery Tag Suggestion
plug in which works perfectly and makes a nice experience for people using my application.
I wanted to share a couple of learnings for others who would like to implement this plugin in their ASP.NET MVC applications where they need to return data from a database instead of a static tag list/file.
To make it easier for you to implement a similar function I have created an ASP.NET MVC project which can be downloaded here Tag Suggestion ASP.NET MVC project files and Tag Suggestion database back up. You can also check out a working version of this source code here ASP.NET Tag Suggestion demo
Of course the first step is to download the tag.js file from Remy's article and add this file to your Scripts folder in your MVC project.
Then you will need to add a reference to this file and add the tag script under the Head html tag in your Site.Master file normally found under the Views/Shared folder.
The reference to the tag.js file will look something like
12 <script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
13
14 <script src="<%= Url.Content("~/Scripts/tag.js") %>" type="text/javascript"></script>
15
16 <% if (false)
17 { %>
18
19 <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript" </script>
20
21 <script src="../../Scripts/tag.js" type="text/javascript"></script>
22
23 <% } %>
and the tag script for the Ajax version of the Tag Suggestion which will look up and return data from your database. The script should look like
25 <script type="text/javascript">
26
27 $(function() {
28 $('#ParentTags').tagSuggest({
29 url: 'TagSuggestion',
30 delay: 250
31 });
32 });
33
34 </script>
Notice the #ParentTags which will be the id of the textbox you would like to use for the Tag Suggestion feature. This textbox will call/fire the jQuery function. Also notice the url: 'TagSuggestion' which points to a action within the current controller file being used to return the view where you will be using this tag suggestion textbox.
Now you need to add the textbox to the view where you want to use the Tag Suggestion like this
19 <%= Html.TextBox("ParentTags")%>
As you can see this text box has a name/id of "ParentTags" which will link to the script also called #ParentTags. To make it easy and clean I have also got a field in my database called "ParentTags" so I can save the tags the person enters.
Last but not least we need to add the Action to the Controller which will be used to render the view we added the textbox to above.
The Action code will look like
82 public ActionResult TagSuggestion()
83 {
84
85 var tagDetailsGrp = from tdg in db.vw_TagDetails_Grps
86 orderby tdg.DetailIDCount descending
87 select tdg;
88
89 ArrayList list = new ArrayList();
90
91 foreach (vw_TagDetails_Grp item in tagDetailsGrp)
92 {
93 list.Add(item.DetailTag);
94 }
95
96 return this.Json(list);
97
98 }
This Action code goes to a view in my database which groups all of the tags from the table called TagDetails and returns this list of tags. The code then adds each tag to an ArrayList which is then returned to the jQuery function in JSON format.
That's it now you should have your new jQuery Tag Suggestion function up and running. I hope this helps to save you a bit of time and feel free to let me know if you have any questions.