Skip to main content

AutoComplete TextBox with ASP.NET MVC and jQuery

jQuery UI has an AutoComplete widget. The autocomplete widget is quite nice and straight forward to use. In this post, how to integrate the AutoComplete widget with an ASP.NET MVC application.
The first step is to add the jQuery scripts and styles. With ASP.NET MVC 4, the following code does the work:
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/jqueryui")
Using the AutoComplete widget is also simple. You will have to add a textbox and attach the AutoComplete widget to the textbox. The only parameter that is required for the widget to function is source. For this example, we will get the data for the AutoComplete functionality from a MVC action method.
$(document).ready(function () {
    $('#tags').autocomplete(
        {
            source: '@Url.Action("TagSearch", "Home")'
    });
})
In the above code, the textbox with id=tags is attached with the AutoComplete widget. The source points to the URL of TagSearch action in the HomeController: /Home/TagSearch. The HTML of the textbox is below:
<input type="text" id="tags" />
When the user types some text in the textbox, the action method - TagSearch is called with a parameter in the request body. The parameter name is term. So, your action method should have the following signature:
public ActionResult TagSearch(string term)
{
    // Get Tags from database
    string[] tags = { "ASP.NET", "WebForms", 
                    "MVC", "jQuery", "ActionResult", 
                    "MangoDB", "Java", "Windows" };
    return this.Json(tags.Where(t => t.StartsWith(term)), 
                    JsonRequestBehavior.AllowGet);
}
With the above code, the AutoComplete functionality is complete. Quite simple, right?



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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


<!doctype html>




<html lang="en">




<head>




  <meta charset="utf-8">




  <title>jQuery UI Autocomplete - Default functionality</title>




  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">




  <script src="//code.jquery.com/jquery-1.10.2.js"></script>




  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>




  <link rel="stylesheet" href="/resources/demos/style.css">




  <script>




  $(function() {




    var availableTags = [




      "ActionScript",




      "AppleScript",




      "Asp",




      "BASIC",




      "C",




      "C++",




      "Clojure",




      "COBOL",




      "ColdFusion",




      "Erlang",




      "Fortran",




      "Groovy",




      "Haskell",




      "Java",




      "JavaScript",




      "Lisp",




      "Perl",




      "PHP",




      "Python",




      "Ruby",




      "Scala",




      "Scheme"




    ];




    $( "#tags" ).autocomplete({




      source: availableTags




    });




  });




  </script>




</head>




<body>




 




<div class="ui-widget">




  <label for="tags">Tags: </label>




  <input id="tags">




</div>




 




 




</body>




</html>


Comments

Post a Comment

Popular posts from this blog

ASP .NET - XML Files

An XML File Here is an XML file named "countries.xml": <?xml version="1.0" encoding="ISO-8859-1"?> <countries> <country>   <text>Norway</text>   <value>N</value> </country> <country>   <text>Sweden</text>   <value>S</value> </country> <country>   <text>France</text>   <value>F</value> </country> <country>   <text>Italy</text>   <value>I</value> </country> </countries> Bind a DataSet to a List Control First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page: <%@ Import Namespace="System.Data" %> Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded: <script runat="server"> sub Page_Load if Not Page.IsPos...
Post a Comment
Read more

Net FrameWork (Basic Concepts)

Net FrameWork (Basic Concepts) See more presentations by aSGuest51943  |  Upload your own PowerPoint presentations .Net Framework (Basic Concepts) : .Net Framework (Basic Concepts) 1 Amrita Academy For Career Excellence Overview of the .NET Framework : Overview of the .NET Framework Software development environment which helps developers to develop applications quickly and gives optimum, efficient, scalable, performance oriented applications in different languages like Visual Basic .NET, C#, ASP.NET, and Jscript .NET etc... 2 Amrita Academy For Career Excellence Slide 3: Services NET Framework provides the following services: Tools for developing software applications , run-time environments for software application to execute, server infrastructure, value added intelligent software which helps developers to do less coding and work efficiently. The .Net Framework will enable developers to develop applications for various devices and platforms like window...
Post a Comment
Read more

Crystal and Reporting Services Interview Questions - Part 2

Introduction   This FAQ will give you a quick start for two report giant's crystal and reporting services. We have two IIS application 'Reports' and 'Reportserver' what do they do ?   When you install reporting services there are two virtual directories created as shown in the figure below. Figure : - IIS Applications for reports The 'Reports' virtual directory is like an admin. If you browse to http://yourpcname/reports/home.aspx   page you can view, edit properties and display reports. We have numbered the below figure. 1 à We can browse reports and see the output of reports. 2 à We can upload a RDL file directly in the report's database. 3 à Using the report builder link we build new reports. 4 à Using the properties we can do role assignment. 5 à Using subscription link we can add new outputs (FTP, Folder etc) to subscribe to the reports. 6 à Site settings help us to decide how many numbers of snapshots we want in the history, report time out...
Post a Comment
Read more