AutoComplete using JQuery

This sample demonstrates how to use AutoComplete functionality using JQuery. AutoComplete is used to like popup panel to display words that has the prefix typed into textbox.

Getting Started

Creating a ASP.NET Application:

• Open Visual Studio 2010.
• Go to File => New => Web Site.
• Select ASP.NET Web Site from the Installed templates
• Enter the Name and choose the location.
• Click OK.

Now on page first of all add these .js files inside of head tag.

<title>jQuery Autocomplete Sample</title>
        <link rel="stylesheet" href="theme/jquery.ui.all.css">
        <script src="jquery-1.4.4.js"></script>
        <script src="ui/jquery.ui.core.js"></script>
        <script src="ui/jquery.ui.widget.js"></script>
        <script src="ui/jquery.ui.position.js"></script>
        <script src="ui/jquery.ui.autocomplete.js"></script>

<script>
            $(function () {
                var technologies = [
                        "ActiveDirectory",
                        "ADO.NET",
                        "AJAX",
                        "Algorithms",
                        "ASP.NET",
                        "ASP.NET MVC",
                        "Assemblies",
                        "BizTalk Server",
                        "C#",
                        "Career Advice",
                        "Cloud Computing",
                        "COBOL.NET",
                        "Compact Framework",
                        "Deployment",
                        "DirectX",
                        "Enterprise Development",
                        "Exception Handling",
                        "Financial Applications",
                        "Games Programming",
                        "Hardware",
                        "HTML",
                        "JQuery",
            "LINQ",
            "MESSAGE QUEUE",
            "Mobile EMBEDDED",
            "Networking",
            "Pocket PC",
            "Printing",
            "Project Management",
            "Remoting",
            "Sharepoint",
            "Silverligh",
            "Testing",
            "Threading",
            "WCF",
            "Web Forms",
            "Web Services",
            "WF",
            "Windows Phone"
                ];
                $("#tags").autocomplete({
                    source: technologies
                });
            });
        </script>
    <style type="text/css">
        #tags {
            width: 249px;
        }
    </style>

Now add a INPUT html control inside of form tag.

<div class="demo">
    <div class="ui-widget">
        <label for="tags">Technologies: </label>
        <input id="tags"
            style="font-family: 'Cordia New'; font-size: x-large; font-weight: normal; font-style: italic; font-variant: normal; color: #FF0000" />
    </div>
    </div>   

This is it. Now time to run the application to see the result.

 

Figure 1.

 

Figure 2.

Figure 3.

All .js and .css files are in attached application.

This is it. If you have any question or comments then drop me a line in c-sharpcorner comments section.