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!