TypeAhead with Bootstrap Tags Input

1 min read

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:

 

<input type="text" data-provide="typeahead">

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

 

<script>
var type = ["Donor","Volunteer","Member","Resource","Follow-up","Friend"]; 
var elt = $('#mytagged > > input');
 elt.tagsinput({
  typeahead: {
  	source: type
  }
});
</script>

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"];