TypeAhead with Bootstrap Tags Input

< 1 min read
Reading Time: < 1 minute

Using TypeAhead will be a real headache if you have the latest version of Bootstrap but the original TypeAhead script.

So for starters, make sure you are using Bootstrap-3-Typeahead.

Step 1: Put the data-provide attribute in the input element:

 


Step 2: Add pre-populated values at bottom of the page

 


THAT’S IT

 

BTW – there are different ways to populate the typeahead variable:

1. Call from a Laravel function

public static function returnTypeahead(){
	$output = array( "Donor",  "Volunteer",  "Member",  "Resource",  "Follow-up", "Friend");
	echo json_encode($output);
}
var type = {{ @Tools::returnTypeahead(); }};

2. Get from a file:

type = $.getJSON( "/assets/myfile.json");

3. Hard code

var type = ["Donor","Volunteer","Member","Resource","Follow-up","Friend"];