ASP.Net MVC 4 + jQuery Autocomplete + Json

Tools used
1. Microsoft VS 2012
2. Jquery
3. Jquery-ui
4. Jquery-ui.css

Step to integrate – ASP.Net MVC 4 + jQuery Autocomplete + Json

First of all, we will assume you know how to create a new MVC project in MS 2012, in case you need guide, please refer to here.
After create the project, By default, jquery and jQuery-UI javascript files has been created in Scripts folder and you will see files like image below, We will need these files in later step.
.
Download jQuery-ui.css and save into content folder.
Create a controller named JqueryController. (Right click on Controllers Folder > Add > Controller)
In the JqueryController.cs, add a view with name index. (Right click on ActionResult > Add View)
Go to App_start>BundleConfig.cs, and modify your code to include the download jquery-ui.css

C#
1
2
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
                        "~/Content/jquery-ui.css"));

Notes: By adding new line into bundle meaning that all view will download the file even thought the page does not require the file, We assume that all of the view need this file, so that is why we include the file in bundleConfig.cs

Now we need to prepare json data source, go to Controller> JqueryController add this function, this function will search any text send from browser and then return data as jsonresult.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public JsonResult AutoComplete(string search) { 
 
            var data = new [] {"ActionScript","AppleScript","Asp",
              "BASIC",
              "C","C++","Clojure","COBOL","ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "instinctcoder.com",
              "Java","JavaScript",
              "Lisp",
              "Perl","PHP","Python",
              "Ruby",
              "Scala","Scheme"};
 
            var result = data.Where(x => x.ToLower().StartsWith(search.ToLower())).ToList();
 
            return Json(result, JsonRequestBehavior.AllowGet);
        }

To test the created function, browser to this URL http://yourip/jquery/autocomplete?search=, you will have this result return in your browser.

In the Jquery/Index.chtml. Copy code from jQuery website and modify a little bit to make it look like MVC Code

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@Scripts.Render("~/bundles/jqueryui")
<h2>jQuery AutoComplete</h2>
  <script>
      $(function () {
           $('#tags').autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: '@Url.Action("AutoComplete")',
                      dataType: "json",
                      contentType: 'application/json, charset=utf-8',
                      data: {
                          search: $("#tags").val()
                      },
                      success: function (data) {
 
                          response($.map(data, function (item) { 
                              return {
                                  label: item
                              };
                          }));
                      },
                      error: function (xhr, status, error) {
                          alert(error);
                      }
                  });
              },
              minLength: 2
          });
      });
 
  </script>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" /> 
</div>

Please take note the @Url.Action("AutoComplete") will generate url string in this format ‘/contoller/action/’ i.e. it will generate /jquery/autocomplete’

You need to make sure the jQuery javascript is place on top of jQuery-UI javascript file or else Autocomplete will not work. Modify _Layout.chtml, and it will look like this
@Scripts.Render("~/bundles/jquery")
Run the application (F5). That’s all!

Comments