kimtrien / ajax-live-search

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

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 it in action.

Browser Support

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

Getting started with Ajax Live Search

Assuming you have this text field: <input type="text" class='mySearch' id="ls_query">

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

2. Specify the required configurations specially database configurations in Config.php. The file is located in core folder and contains back-end settings for the plugin. Check PHP Configs table for more details.

3. Include ajaxlivesearch.min.js or ajaxlivesearch.js located in js folder and ajaxlivesearch.min.css or ajaxlivesearch.css located in css in your project.

4. Change the url for Access-Control-Allow-Origin header in process_livesearch.php that is located in ajax folder.

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

   if (session_id() == '') {
   	session_start();
   }
   
   Handler::getJavascriptAntiBot();
   $token = Handler::getToken();
   $time = time();
   $maxInputLength = Config::getConfig('maxInputLength');
   

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

jQuery("#ls_query").ajaxlivesearch({ loaded_at: , token: , maxInput: , }); ```

jQuery Options

Name	Type	Required	Description
loaded_at	Integer	Yes	This is used to prevent bots from searching.
token	String	Yes	This is used to prevent CSRF attack.
url	String	No	Default: ajax/process_livesearch.php.
cache	Boolean	No	This refers to Ajax request caching. Default: false
form_anti_bot	String	No	Default: ajaxlivesearch_guard
slide_speed	String	No	Default: fast
type_delay	Integer	No	Default: 350
max_input	Integer	No	Default: 20
min_chars_to_search	Integer	No	Minimum characters length to start searching. Default: 0
page_ranges	Array	No	Default: [0, 5, 10]
page_range_default	Integer	No	Default: 5
form_anti_bot_class	String	No	Default: ls_anti_bot
footer_class	String	No	Default: ls_result_footer
next_page_class	String	No	Default: ls_next_page
previous_page_class	String	No	Default: ls_previous_page
page_limit	String	No	Default: page_limit
result_wrapper_class	String	No	Default: ls_result_div
result_class	String	No	Default: ls_result_main
container_class	String	No	Default: ls_container
pagination_class	String	No	Default: pagination
form_class	String	No	Default: search
loaded_at_class	String	No	Default: ls_page_loaded_at
token_class	String	No	Default: ls_token
current_page_hidden_class	String	No	Default: ls_current_page
current_page_lbl_class	String	No	Default: ls_current_page_lbl
last_page_lbl_class	String	No	Default: ls_last_page_lbl
total_page_lbl_class	String	No	Default: ls_last_page_lbl
page_range_class	String	No	Default: ls_items_per_page
navigation_class	String	No	Default: navigation
arrow_class	String	No	Default: arrow

Custom Event

Name
onResultClick
onResultEnter
onAjaxComplete

Example:

jQuery(".mySearch").ajaxlivesearch({
        loaded_at: <?php echo $time; ?>,
        token: <?php echo "'" . $token . "'"; ?>,
        maxInput: <?php echo $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('.mySearch').val(selectedOne);

            // hide the result
            jQuery(".mySearch").trigger('ajaxlivesearch:hide_result');
        },
        onResultEnter: function(e, data) {
            // do whatever you want
            // jQuery(".mySearch").trigger('ajaxlivesearch:search', {query: 'test'});
        },
        onAjaxComplete: function(e, data) {
            // do whatever you want
        }
    });

Custom Trigger

Name
ajaxlivesearch:hide_result
ajaxlivesearch:search

PHP Configurations

Name	Type	Required	Description
dataSources	Array	Yes	Data source for each search text field. Keys are refering to the field HTML id. Currently MySQL and mongoDB (this is in beta) are supported. MySQL data source configs: Name Type Required Description host String Yes MySQL database host. It usually is 'localhost'. database String Yes MySQL database name. username String Yes MySQL database username. pass String Yes MySQL database username password. table String Yes MySQL database table that the live search searches in. searchColumns Array Yes Search columns that the live search searches in. It can be one or many. e.g. array('column_name_1', 'column_name_2') orderBy String No Column that the result is ordered based in it. orderDirection String No Order direction: 'ASC' or 'DESC' for 'orderBy'. Default value: ASC filterResult Array No Columns that need to be in the result. If it is empty all the columns will be returned. comparisonOperator String Yes Search query comparison operator. Possible values for comparison operators are: 'LIKE' and '='. searchPattern String Yes This is used to specify how the query is searched. possible values are: `q`, `*q`, `q*`, `*q*`. caseSensitive String Yes Search query case sensitivity maxResult Integer No This is used to limit the maximum number of result. displayHeader Array No This is used to display or hide the header in the result. If 'active' is set to true header is displayed. Also, it is possible to map columns to different titles. columnClass Array No It is possible to map columns to custom css class(es). Use ls_hide to hide column from table display. type String Yes Type of the datasource. Currently possible values are: 'mysql' or 'mongo'.
antiBot	String	Yes	This is used as a security technique to prevent form submissions from those bots that do not use JavaScript. In this technique, a hidden field is populated using jQuery with this value. It can have any value, but it MUST be the same as `form_anti_bot` option passed to the jQuery plugin. By default it is set to `ajaxlivesearch_guard`.
searchStartTimeOffset	Integer	Yes	This is used for another security technique against bots. Some bots immediately submit a form once the page is finished loading. However, for human beings it takes more time to fill a field. By default this parameter is set to 3 seconds. Assigning more than 3 seconds is not recommended.
maxInputLength	Integer	Yes	This specifies the maximum length of characters in search field.

License

MIT License