AJAX Live Search

AJAX Live Search is a jQuery plugin / PHP search form that searches and displays the result as you type similar to Google Autocomplete feature.

Demo

Check it out in action.

Browser Support

IE 8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

Thanks to BrowserStack and JetBrains for supporting this project.

Getting started with Ajax Live Search

Getting the current example in index.php to work including creating a dummy database and a table should not take longer than 7 minutes. But it will take more in case you need to integrate it in an existing project. To achieve that assuming you have this text field:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

1. Copy the folders including core, css, font, img, js and templates to your project.

2. Specify the required configurations specially database configurations in core/Config.template.php and rename the file to Config.php. This file contains all the back-end settings for the plugin that have been explained in PHP Configs table.

3. Include js/ajaxlivesearch.min.js or js/ajaxlivesearch.js and css/ajaxlivesearch.min.css or css/ajaxlivesearch.css in your page.

4. Change the URL for Access-Control-Allow-Origin header in core/AjaxProcessor.php to your project URL. Currently it is https://ajaxlivesearch.com.

5. Make sure core/Handler.php and core/Config.php are included in your (PHP) page and you have these lines at the very top of the file (Check index.php):

   use AjaxLiveSearch\core\Config; use AjaxLiveSearch\core\Handler;  if (session_id() == '') {     session_start(); }  $handler = new Handler(); $handler->getJavascriptAntiBot(); 

6. Lastly, hook the plugin to the text field and pass the required options (loaded_at & token):

jQuery("#ls_query").ajaxlivesearch({ loaded_at: , token: getToken() . "'"; ?>, max_input: , }); ```

You can also post additional parameters to the server if you need. To achieve this you should add data attributes to the search input:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!"> 

For example, in this case you can access the data attribute in PHP like this:

// key is transformed to lowercase $additionalData = $_POST['additionaldata']; 

jQuery Options

Custom Event

Example:

jQuery(".mySearch").ajaxlivesearch({     loaded_at: <?php echo time(); ?>,     token: <?php echo "'" . $handler->getToken() . "'"; ?>,     max_input: <?php echo Config::getConfig('maxInputLength'); ?>,     onResultClick: function(e, data) {         // get the index 1 (second column) value         var selectedOne = jQuery(data.selected).find('td').eq('1').text();          // set the input value         jQuery('#ls_query').val(selectedOne);          // hide the result         jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');     },     onResultEnter: function(e, data) {         // do whatever you want         // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});     },     onAjaxComplete: function(e, data) {      } }); 

Custom Trigger

PHP Configurations

FAQ

• What is the risk in disabling anti_bot and token?

  form_anti_bot is a nice security feature to have but it should be fine to remove it. To achieve this you need to change validateRequest() in core/AjaxProcessor.php and remove $_POST['ls_anti_bot'] as well as changing verifySessionValue($sessionParameter, $sessionValue) in core/Handler.php. In contrast, removing the token allows anyone to create a form and use your server as the data source and therefore it is not recommended. Currently, each time the page / search form is loaded a new token is generated by calling getToken() in the form page (index.php in the current example). Then the token and anti_bot are checked using verifySessionValue($sessionParameter, $sessionValue) upon searching / sending a new request to the server. If this looks an overkill to you, in getToken() return the same token for the existing session.

• How a column can be hidden in the result?

  This can be achieved in your template. An example can be found in templates/hiddenColumn.php

License

MIT License

Buy me half of a coffee if you like!