Integration with CodeIgniter

Integrate AjaxLiveSearch with CodeIgniter (CI 1.3.10 / Ubuntu)

There are for sure better ways to do it but I would like to share my attempt of integration for those who whould like to try it :)

The original instructions will be indicated as blockquotes

And below my additions ;)

Steps

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

I place all the files and folders in "als" folder (public) at the root of the site.
Rename this folder the way you want, but keep in mind it should be short.

/var/www/your_site.tld/als copy here everything from the package.
/var/www/your_site.tld/application contains your CI code (with controllers/models/views folders).

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.

Modify according your needs ;)

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

You will reference them in your html code this way:

In the Header of your view php file (or in your Header fragment)

<stylesheet href="<?php echo base_url('als/css/ajaxlivesearch.min.css'); ?>" />

In the Footer of your view php file (or in your Footer fragment)

<script src="<?php echo base_url('als/js/ajaxlivesearch.min.js'); ?>"></script>

Open the .js files and modify the url from "core/AjaxProcessor.php" to "../als/core/AjaxProcessor.php"
(or to the folder name you gave, but don't forget the ../ before)
The full url will become http://your_site.tld/als/core/AjaxProcessor.php

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

Modify according your needs ;)

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):

We will do it in a bit different way, at the top of your controller php file

<?php defined('BASEPATH') OR exit('No direct script access allowed');
require_once(APPPATH.'../als/core/AlsConfig.php');
require_once(APPPATH.'../als/core/Handler.php');
use AjaxLiveSearch\core\AlsConfig;
use AjaxLiveSearch\core\Handler;
if (session_id() == '') {
    session_start();
}

class YourController extends CI_Controller {

  public $handler; //declare it as public!

  public function __construct()
  {
    parent::__construct();
    //$this->load->library('session'); //Not needed, as the session is startd before
    $this->handler = new Handler();
    $this->handler->getJavascriptAntiBot();
(...)

Later in your your controller function you will pass some values as parameter:

  $data = array(); //Initialization
  (...)
  $data['alsToken']          = $this->handler->getToken();
  $data['alsMaxInputLength'] = AlsConfig::getConfig('maxInputLength');
  (...)
  $this->load->view('your_view', $data);

to use them in your view php file

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

Setup you search field somewhere in your HTML (view php file)

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

I use jQuery readyFn to set up my input field functions, with parameters transmited from the controller.
Please refer to the original documentation for more details and options.

  function readyFn( jQuery ) {

    jQuery("#ls_query").ajaxlivesearch({
            loaded_at: <?php echo time(); ?>,
            token:     <?php echo "'".$alsToken."'"; ?>,
            max_input: <?php echo $alsMaxInputLength; ?>,
           
            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) {
            }
    });

  }

Hoping you will find this helpful :)