Bootstrap Typeahead
Brief introduction
In this tutorial, you'll see how to use Bootstrap create Typeahead.
Typeahead when users fill in forms, to provide users with hints or data.
Bootstrap allows you to create nice-looking Typeahead, moreover, it is easy to expand, you may not need drastic changes you can enhance its functionality.
What is required
Typeahead is Bootstrap 2.x version of the product, so this tutorial uses Bootstrap2.0 testing.
You must reference two JavaScript files jquery.js and bootstrap-typeahead.js, they are located in the docs / assets / js / inside.
The following example demonstrates how to write JavaScript is not created only by marking Typeahead.
Examples
Examples
<Input type = "text" class = "span3" style = "margin: 0 auto;" data-provide = "typeahead" data-items = "4" data-source = "[& quot; Ahmedabad & quot;, & quot; Akola & quot; , & quot; Asansol & quot;, & quot; Aurangabad & quot;, & quot; Bangaluru & quot;, & quot; Baroda & quot;, & quot; Belgaon & quot;, & quot; Berhumpur & quot;, & quot; Calicut & quot;, & quot; Chennai & quot;, & quot; Chapra & quot;, & quot; Cherapunji & quot; ] ">
</ Div>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
You can call typeahead through javascript, and strengthening the function through the use of different options. Call typeahead by JavaScript are used as follows:
$('#example').typeahead() Wherein the 'example' is the id you want to apply typeahead the input field. Examples
Examples
<Input type = "text" class = "span3" id = "search" data-provide = "typeahead" data-items = "4" />
</ Div>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
<Script>
var subjects = [ 'PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$ ( '# Search') typeahead. ({Source: subjects})
</ Script>
Options
You can use various Typeahead option. Next, a detailed explanation of each option:
source: a predetermined value when the data source contains the query to be displayed. Type value is array, the default value is [].
items: specify the maximum value to be displayed when the query entry. Data type is number, the default value is 8.
matcher: determine whether the query matches the entry. With a single argument, that is, to test the query entry. The current inquiry by this.query access. Returns a Boolean value true, it indicates that the query match. Data type is function. The default is not case sensitive.
sorter: for automatic classification. With a single parameter, namely the entry with typeahead scope of the examples. The current inquiry by this.query access. Data type is function. The default value is an exact match, other values may also be case sensitive, case insensitive.
highlighter: used to automatically highlight highlighted results. With a single parameter, namely the entry with typeahead scope of the examples. Data type is function. By default, the default is to highlight to highlight all matches.
method
.typeahead (options)
It initializes a band Typeahead input box.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.