AJAX Autocomplete & Live Search Plugin With jQuery And PHP

This is a jQuery and PHP powered autocomplete library which adds the performant, configurable, AJAX-enabled live search functionality to your text input.

Key features:

• Cross-browser.
• Responsive dropdown autocomplete list.
• Supports pagination for complex & long search results.
• Supports both front-end and back-end communication using JSON.

Basic usage:

1. Insert the following JavaScript and CSS files into the document.

<link rel="stylesheet" href="ajaxlivesearch.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="ajaxlivesearch.min.js"></script>

2. Override the default configs in the Config.template.php and then rename the PHP file into Config.php.

$configs = [
  // ***** Database ***** //
  'dataSources'           => [
      'ls_query' => [
          'host'               => 'localhost',
          'database'           => 'live_search',
          'username'           => 'root',
          'pass'               => 'root',
          'table'              => 'live_search_table',
          // specify the name of search columns
          'searchColumns'      => ['name'],
          // specify order by column. This is optional
          'orderBy'            => '',
          // specify order direction e.g. ASC or DESC. This is optional
          'orderDirection'     => '',
          /**
           * filter the result by entering table column names
           * to get all the columns, remove filterResult or make it an empty array
           */
          'filterResult'       => [],
          /**
           * specify search query comparison operator.
           * possible values for comparison operators are: 'LIKE' and '='. this is required
           */
          'comparisonOperator' => 'LIKE',
          /**
           * searchPattern is used to specify how the query is searched.
           * possible values are: 'q', '*q', 'q*', '*q*'. this is required
           */
          'searchPattern'      => 'q*',
          // specify search query case sensitivity
          'caseSensitive'      => false,
          // to limit the maximum number of result uncomment this:
          //'maxResult' => 100,
          // to display column header, change 'active' value to true
          'displayHeader' => [
              'active' => true,
              'mapper' => [
                  'name' => 'Name',
                  // 'your_second_column' => 'Your Desired Second Title'
              ]
          ],
          'type'               => 'mysql',
      ],
      'ls_query_2' => [
          'host'               => 'localhost',
          'database'           => 'live_search',
          'username'           => 'root',
          'pass'               => 'root',
          'table'              => 'live_search_table',
          'searchColumns'      => ['name'],
          'orderBy'            => '',
          'orderDirection'     => '',
          'filterResult'       => [],
          'comparisonOperator' => 'LIKE',
          'searchPattern'      => 'q*',
          'caseSensitive'      => false,
          'displayHeader' => [
              'active' => false,
              'mapper' => []
          ],
          'type'               => 'mysql',
      ],
      'mainMongo' => [
          'server'       => 'your_server',
          'database'     => 'local',
          'collection'   => 'your_collection',
          'filterResult' => [],
          'searchField'  => 'your_collection_search_field',
          'type'         => 'mongo',
      ]
  ],
  // ***** Form ***** //
  'antiBot'               => "ajaxlivesearch_guard",
  // Assigning more than 3 seconds is not recommended
  'searchStartTimeOffset' => 2,
  // ***** Search Input ***** //
  'maxInputLength'        => 20,
  // ***** Template ***** //
  'template' => 'default.php',
];

3. Create a search input on the page.

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

4. Enable the ajax live search on the search input.

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 0 (first column) value
      var selectedOne = jQuery(data.selected).find('td').eq('0').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) {

  }
});

5. All default plugin options.

url: "core/AjaxProcessor.php",
// This should be the same as the same parameter's value in config file
form_anti_bot: "ajaxlivesearch_guard",
cache: false,
/**
 * Beginning of classes
 */
form_anti_bot_class: "ls_anti_bot",
footer_class: "ls_result_footer",
next_page_class: "ls_next_page",
previous_page_class: "ls_previous_page",
page_limit: "page_limit",
result_wrapper_class: "ls_result_div",
result_class: "ls_result_main",
container_class: "ls_container",
pagination_class: "pagination",
form_class: "search",
loaded_at_class: "ls_page_loaded_at",
token_class: "ls_token",
current_page_hidden_class: "ls_current_page",
current_page_lbl_class: "ls_current_page_lbl",
last_page_lbl_class: "ls_last_page_lbl",
total_page_lbl_class: "ls_last_page_lbl",
page_range_class: "ls_items_per_page",
page_ranges: [0, 5, 10],
page_range_default: 5,
navigation_class: "navigation",
arrow_class: "arrow",
/**
 * End of classes
 */
slide_speed: "fast",
type_delay: 350,
max_input: 20,
min_chars_to_search: 0

---

This awesome jQuery plugin is developed by iranianpep. For more Advanced Usages, please check the demo page or visit the official website.