jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax
In this tutorial we are going to see how to implement jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax. Please check my previous tutorial on this jQuery UI autocomplete before continuing this tutorial.
Invoice System Using jQuery AutoComplete
jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL
jQuery Autocomplete Post Tagging System Like In WordPress
Two Fields jQuery UI Autocomplete Using Jquery PHP MYSQL
Google Address Autocomplete API
jQuery UI Autocomplete For Two Fields Using PHP Ajax and MySQL
Steps:
1. Create Full Screen Bootstrap Modal Popup.
2. Adding Invoice HTML Form inside Full Screen Bootstrap Modal Popup.
3. Integrating jQuery UI autocomplete in the Bootstrap Modal Popup.

Create index.php file and add basic HTML markup in it.
Create “modal_auto” folder in your server root (htdocs or www) directory. Now create index.php, css & js folders, and add the following basic html in index.php file. Also download bootstrap, jQuery, jQuery UI from their respective sites and add it to their css and js folders. (or else download source file and use it.)
You may also interested in Learning jQuery Autocomplete from scratch. Checkout Video Tutorials series on: jQuery UI Autocomplete from Scratch
Learn jQuery Autocomplete in 3 Minutes
Create Full Screen Bootstrap Modal Popup.
Here our HMTL markup for full screen bootstrap modal popup. Add this following markup in the index.php itself.
Here is the bootstrap modal popup launcher button, which has id of the modal in the data-target property.
Here is the CSS to set Our Bootstrap Modal popup to full screen. This bootstrap modal popup also responsive one, because based on the viewport size it will automatically resize by itself.
Integrating jQuery UI autocomplete in the Bootstrap Modal Popup
Here I have integrated the jQuery UI autocomplete event to the textbox which has class of autocomplete_txt. So whenever user types something in the textbox which has class of autocomplete_txt, then autocomplete is event triggered. That will make ajax call to the mentioned URL.
Please refer following tutorial for detailed discussion of autocomplete integration.
Note : By default autocomplete options will append to body tag if you not specify appendTo option. To display autocomplete suggestions textbox in the Bootstrap modal popup we need to sepcify appendTo option to “#modal-fullscreen” (modal popup id).
Also refer following this tutorial for dynamically add and removal of table rows using jQuery.
Crate ajax.php File To Handle jQuery autocomplete event Ajax Request:
First create config.php file, where we will keep all site wide configurations and database credentials.
Now create ajax.php file and include that config.php file in it, also add the following php script that handle ajax request that comes from autocomplete event.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement