Typeahead and Scrollspy of Bootstrap

 Bootstrap Typeahead

The main purpose of using typeahead is to improve the user experience by provision sign or a list of possible objects based on the text they’ve entered while filling a form or searching something — like the Google instant search.

 Creating Typeaheads with Bootstrap

* Typeahead functionality also saves time and reduces the number of potential errors, because the user has less likelihood of making a spelling mistake. Typeahead has been dropped plugin from theBootstrap (v3.0+), in favor of using Twitter typeahead.

* Twitter typeaheads is a fastest version and fully-featured autocomplete library inspired by twitter.com’s autocomplete discover functionality. They used cover in your project, after that you can turn any text-based input element into a typeahead.

Syntax:-

$(‘.typeahead’).typeahead()

Example:-

Start typing in the field below to show the typeahead results.

 Creating Twitter Typeahead with Local Dataset

The following example will show you how to create Twitter typeahead with local dataset.

Code:-

Output:-

Type your favorite color name

Creating Twitter Typeahead External Dataset

You can also specially external dataset by a URL pointing to a JSON file containing an array of datums. The individual units that composed datasets are known as datums.

Code:-

Output:-

Enter your country name

 Options

You can use various Typeahead option. Next, a detailed explanation of each option:

Table:-

 Markup

Add data attributes to register an element with typeahead functionality.

 Methods

.typeahead(options)

Initialized an input with a typahead.

Syntax:-

.typeahead (options)

 Bootstrap Scrollspy

Directly update Bootstrap navigation or series of group components based on scroll position to indicate which link is currently active in the viewport.

Examples of Bootstrap Scrollspy :-

Content

Content

Content

 Creating ScrollSpy with Bootstrap

The Bootstrap scrollspy is a navigating mechanism that directly highlights the nav adds based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for conduct the visitors to the various sections of a page that has a huge amount of content.

Here’s a symbolic example of Bootstrap scrollspy.

Code

Output

Section OneSection TwoSection Three

Section One

This is section one content…

Section Two

This is section two content…

Section Three

This is section three content…

 Creating ScrollSpy via Data Attributes

You can easily link with scrollspy behavior to your topbar navigation via data attributes without writing a single line of JavaScript code. Let’s check out the following example:

Bootstrap Scrollspy

Bootstrap scrollspy is a navigating mechanism that directly highlights the nav adds based on the scroll position to indicate the visitor where they are currently on the page.

Section 1

Gurukul Zone SRCS!

 Description of Code

The Bootstrap scrollspy has Commonly two components — the target nav (e.g. navbar, nav tabs or pills) and the scrabble territory to spy on, which is often the body section.

* The data-spy=”scroll” associate (line no-01) is applied to the scrollable element that is being examine on, which is the body factor.

* The data-target associate is linked on the scrollable factor with the ID or class of the parent element of the Bootstrap like .nav component so that nav add can be targeted by the scrollspy for promoting purpose.

* The alternate data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Adjust the offset value if the targeted links are highlighting too early or too late. The default value is 10 pixels.

Rest of the thing is self explanatory, such as the .navbar element specifies a Bootstrap navbar, the element(line no-33) create a bookmark with the id attribute, whereas the element Section 1 (line no-17) add a link to this bookmark, from within the same page, and so on.

 Creating ScrollSpy via JavaScript

You may also link scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code. <script> $(document).ready(function(){ $(“body”).scrollspy({ target: “#myNavbar”, offset: 70 }) }); </script>

Options

There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.

 Methods

These are the standard bootstrap’s scrollspy methods:- .scrollspy(‘refresh’)

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like this:

Syntax-:

<script> $(document).ready(function(){ $(‘[data-spy=”scroll”]’).each(function(){ var $spy = $(this).scrollspy(‘refresh’); }); }); </script>

Events

Bootstrap’s scrollspy class includes few events for hooking into scrollspy functionality.

Syntax:-

<script> $(document).ready(function(){ $(“#myNavbar”).on(“activate.bs.scrollspy”, function(){ var currentItem = $(“.nav li.active > a”).text(); $(“#info”).empty().html(“Currently you are viewing – ” + currentItem); }) }); </script>