How to add ajax to Bootstrap Typeahead From MySQL - Step by Step
Today I want to write about using Ajax to get the source data for Twitter Bootstrap’s Typeahead instead of a static json list. I was on stackoverflow last night and saw a guy asking how to do it and I’ve done it before so thought I’d write a step by step tutorial on how to do just that! Here we go…
First I’ll show you what the form will look like… with the css/js includes that you need for this to work.
Above we have everything you need for this example to work! It is all the basics for your index.php page.
The ajax above is the meat of what we are trying to achieve. On Line 20, we are setting any input field with a class of typeahead (it can be anything you want, I just picked typeahead) to have this functionality added to it.
The only option on the typeahead is source, you can see all the options you can set for it here.
Now for the data.php page
That should do it! Make sure the data.php file only prints out the json! If you have other things echoing/printing out, it will mess the json response up and you will not get the return you want for the typeahead.
The best way to test data.php is going directly to that page, or using your browser to see the network response (Chrome or FF dev tools). Cheers!