Create TypeAhead

Create TypeAhead

A Typeahead plugin is typically used in a form to provide a list of hints (autocomplete) based on the text entered while filling out a text field (e.g., search field). It also help to reduce the number of errors. The Typeahead plugin has been dropped from Bootstraps and the new Twitter typeahead will be used in this tutorial.

View Demo

TypeAhead Instruction (Local)

  1. Download typeahead.js from GitHub and move it to the site directory so that any text-based <input> element can be turned into a typeahead.
    1. Click on the download button and press CTRL+A to select all of the code.
    2. Create a new js file and name is typeahead.js and save it in the js folder.
    3. Paste (CTRL+V) the content of the clipboard into the page.
    4. Link to the js file in the typeahead page.

  2. Create a new file in the site root directory with the Bootstrap framework and save it (e.g., type_ahead.html).

    TIP: Use an existing page that has the Bootstrap framework and delete the content between the <body> opening and closing tags.

  3. Write the following <script> tag above the closing </html> tag to position and format the background color of the various sections that will be created later.

    <script>
$(document).ready

</script>
</html>

  4. Below the opening <body> tag, write the following HTML code to create a navbar and sections

    TIP: See NavBar section for details on code. 

    <body>
<div class="container">
        <h1>RMCS: Learning Made Easy</h1>
        <p><i>Click on a menu item or scroll this page to see sections</i></p>
        <div class="row">
            <div class="col-sm-3" id="menuScrollspy">
                <ul class="nav nav-tabs nav-stacked" data-offset-top="120" data-spy="affix">
                    <li class="active"><a href="#section1">HTML 5</a></li>
                    <li><a href="#section2">CSS 3</a></li>
                    <li><a href="#section3">JavaScript</a></li>
                </ul>
            </div>
    <div class="col-sm-9">
    	<div id="section1">
    		<h2>HTML 5</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    	</div>
    <hr>
    	<div id="section2">
    		<h2>CSS 3</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>		
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>		
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    	</div>
    <hr>
    	<div id="section3">
    		<h2>JavaScript</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    	</div>
    <hr>
    </div>
    </div>
    </div>

  5. Write the following attributes into the opening <body> tag:

    <body data-spy="scroll" data-target="#menuScrollspy">

  6. CHECK POINT: Save the file and preview it in a browser. Use the scrollbar to scroll the page. You should see that as you reach each section of the page the navbar menu change accordingly.