Dynamic jQuery Typeahead Plugin For Bootstrap 4 - Bootstrap Typeahead

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.