Dynamic jQuery Typeahead Plugin For Bootstrap 4 - Bootstrap Typeahead

Dynamic jQuery Typeahead Plugin For Bootstrap 4 - Bootstrap Typeahead
File Size: 34.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is an easy-to-use jQuery Autocomplete & Typeahead plugin for the latest Bootstrap 4 or 3 framework that works both JSON objects and JavaScript strings.

How to use it:

1. Load the JavaScript file bootstrap3-typeahead.js into your Bootstrap pages.

<!-- Bootstrap files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<!-- Bootstrap Typeahead Plugin -->
<script src="bootstrap3-typeahead.js"></script>

2. Create a normal input field on the page.

<input class="typeahead form-control">

3. Call the function on the input field and define your own data in the Source:

$(".typeahead").typeahead({
  source: [
    {id: "id1", name: "jQuery"},
    {id: "id2", name: "Script"},
    {id: "id3", name: "Net"}
  ]
});

4. You can also load the data from an external JSON file.

$.get("data.json", function(data){
  $(".typeahead").typeahead({ 
    source:data 
  });
},'json');
// data.json
["jQuery","Script","Net"]

5. Call the function on the input field and define your own data in the Source:

$(".typeahead").typeahead({ 

  // data source
  source: [],

  // how many items to show
  items: 8,

  // default template
  menu: '<ul class="typeahead dropdown-menu" role="listbox"></ul>',
  item: '<li><a class="dropdown-item" href="#" role="option"></a></li>',
  headerHtml: '<li class="dropdown-header"></li>',
  headerDivider: '<li class="divider" role="separator"></li>' 
  itemContentSelector:'a',

  // min length to trigger the suggestion list
  minLength: 1,

  // number of pixels the scrollable parent container scrolled down
  scrollHeight: 0,

  // auto selects the first item
  autoSelect: true,

  // callbacks
  afterSelect: $.noop,
  afterEmptySelect: $.noop,

  // adds an item to the end of the list
  addItem: false,

  // delay between lookups
  delay: 0,
  
});

Change log:

2018-04-06

  • Fix followLinkOnSelect bug.

2018-01-21

  • prevent to make an ajax call on copy and paste

This awesome jQuery plugin is developed by bassjobsen. For more Advanced Usages, please check the demo page or visit the official website.