Click here to Skip to main content
15,348,645 members
Articles / Web Development / HTML
Posted 2 Jun 2012


6 bookmarked

Auto complete textbox in jQuery Tabs content

Rate me:
Please Sign up or sign in to vote.
3.77/5 (3 votes)
2 Jun 2012CPOL1 min read
Using auto complete textbox in jQuery Tabs content via AJAX in an Microsoft MVC project.


This is a simple tip that will tell us, how we can run  auto complete text box in jQuery tabs? I have create this in Microsoft MVC 4 using Visual Studio 2010 and jQuery API 1.8, since tabs is part of jQuery 1.8 API.

Image 1

Using the code 

I have used MVC 4 using Visual Studio 2010 and added the following code in /views/home/Index.chtml section.

<div id="tabs">
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="Home/DemoView">Demo Tab </a></li>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum . Nunc tristique tempus lectus.</p>

Create a new partial view in "Home" folder name it as DemoView.chtml

E.g., /Views/Home/DemoView.cshtml and add the following lines.

<h>Languages</h>E.g. Type c++,Java
<input type="text" id="lgList"  />

Add a new method in the Home Controller section  

in /Controllers/HomeController 

public ActionResult DemoView()
    return PartialView();

Add and modify a new java script file e.g. "tabify.js" in the script folder of your project (you can also modify any existing js script in the project , no problems as long as its getting referenced in your project properly **.)  

Add the following code in the js file.

load:function (even, ui ) is the function, which is running the auto complete  script for the text box on load of the selected tab. Any further modification related to auto complete can be done here. 

$(document).ready(function () {
    $(function () {

            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo.");
            load: function (event, ui) {
                    source: ["c++", "java", "php", "coldfusion", 
                          "javascript", "asp", "ruby"],
                    select: function (event, ui) {

                       alert ( "You selected : "+ui.item.value);


**Note: If you are adding a new  javascript file in your newly created MVC 4 project , it will not run until you modify a small piece of code in Global.asax in the Application_Start() method.  

protected void Application_Start()


   // BundleTable.Bundles.RegisterTemplateBundles();

Points of Interest

This is a simple article to demonstrate how we can use auto complete or any other jQuery functionality in tab load function? You can modify the tab load function in any way which suits your purpose.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
United States United States
No Biography provided

Comments and Discussions

GeneralMy vote of 3 Pin
Guillaume Leparmentier3-Jun-12 1:24
MemberGuillaume Leparmentier3-Jun-12 1:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.