- Notifications
You must be signed in to change notification settings - Fork78
AJAX Live Search is a PHP search form that similar to Google Autocomplete feature displays the result as you type.
License
iranianpep/ajax-live-search
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
*** This is not maintained anymore ***I started this project a few years ago, but a lot has been changed so far. Also, because of the coupling between different layers, and also old technologies (jQuery!) this is not a scalable project. Thanks a lot for all the support but unfortunately I have to archive this project :(
AJAX Live Search is a jQuery plugin / PHP search form that searches and displays the result as you type similar to Google Autocomplete feature.
IE 8+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
Thanks toBrowserStack andJetBrains for supporting this project.
Getting the current example inindex.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' placeholder="Type to start searching ...">
Copy the folders including
core
,css
,font
,img
,js
andtemplates
to your project.Specify the required configurations specially database configurations in
core/Config.template.php
and rename the file toConfig.php
. This file contains all the back-end settings for the plugin that have been explained in PHP Configs table.Include
js/ajaxlivesearch.min.js
orjs/ajaxlivesearch.js
andcss/ajaxlivesearch.min.css
orcss/ajaxlivesearch.css
in your page.Change the URL for
Access-Control-Allow-Origin header
incore/AjaxProcessor.php
to your project URL. Currently it ishttps://ajaxlivesearch.com
.Make sure
core/Handler.php
andcore/Config.php
are included in your (PHP) page and you have these lines at the very top of the file (Checkindex.php
):use AjaxLiveSearch\core\Config;use AjaxLiveSearch\core\Handler;if (session_id() == '') { session_start();}$handler = new Handler();$handler->getJavascriptAntiBot();
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 adddata
attributes to the search input:
<input type="text" class='mySearch' 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'];
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 |
Name |
---|
onResultClick |
onResultEnter |
onAjaxComplete |
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) { }});
Name |
---|
ajaxlivesearch:hide_result |
ajaxlivesearch:search |
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:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
template | String | Yes | This specifies the template name located in templates folder |
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 changevalidateRequest()
incore/AjaxProcessor.php
and remove$_POST['ls_anti_bot']
as well as changingverifySessionValue($sessionParameter, $sessionValue)
incore/Handler.php
. In contrast, removing thetoken
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 callinggetToken()
in the form page (index.php
in the current example). Then the token and anti_bot are checked usingverifySessionValue($sessionParameter, $sessionValue)
upon searching / sending a new request to the server. If this looks an overkill to you, ingetToken()
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
About
AJAX Live Search is a PHP search form that similar to Google Autocomplete feature displays the result as you type.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors6
Uh oh!
There was an error while loading.Please reload this page.