ajax live search Télécharger - ajax live search Téléchargement du code source

ajax live search

Autre code source

version - Version 3.1

Télécharger

Recherche en direct AJAX

*** Ceci n'est plus maintenu *** J'ai commencé ce projet il y a quelques années, mais beaucoup de choses ont changé jusqu'à présent. De plus, en raison du couplage entre différentes couches, mais aussi des anciennes technologies (jQuery !), ce n'est pas un projet évolutif. Merci beaucoup pour tout votre soutien mais malheureusement je dois archiver ce projet :(

AJAX Live Search est un plugin jQuery/formulaire de recherche PHP qui recherche et affiche le résultat au fur et à mesure que vous tapez, similaire à la fonctionnalité de saisie semi-automatique de Google.

Démo

Découvrez-le en action.

Prise en charge du navigateur


Internet Explorer 8+ ✔	Chrome ✔	Firefox ✔	Opéra ✔	Safari ✔

Merci à BrowserStack et JetBrains pour avoir soutenu ce projet.

Premiers pas avec Ajax Live Search

Faire fonctionner l’exemple actuel dans index.php y compris la création d’une base de données factice et d’une table, ne devrait pas prendre plus de 7 minutes. Mais cela prendra plus au cas où vous auriez besoin de l’intégrer dans un projet existant. Pour y parvenir, en supposant que vous disposiez de ce champ de texte :

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

Copiez les dossiers comprenant core , css , font , img , js et templates dans votre projet.
Spécifiez les configurations requises, en particulier les configurations de base de données, dans core/Config.template.php et renommez le fichier en Config.php . Ce fichier contient tous les paramètres back-end du plugin qui ont été expliqués dans le tableau PHP Configs.
Incluez js/ajaxlivesearch.min.js ou js/ajaxlivesearch.js et css/ajaxlivesearch.min.css ou css/ajaxlivesearch.css dans votre page.
Remplacez l'URL de Access-Control-Allow-Origin header dans core/AjaxProcessor.php par l'URL de votre projet. Il s'agit actuellement de https://ajaxlivesearch.com .

Assurez-vous que core/Handler.php et core/Config.php sont inclus dans votre page (PHP) et que vous avez ces lignes tout en haut du fichier (Vérifiez index.php ) :

 use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();

Enfin, connectez le plugin au champ de texte et transmettez les options requises (loaded_at & token) :

jQuery("#ls_query").ajaxlivesearch({load_at: , token: getToken() . "'"; ?>, max_input: , }); ```

Vous pouvez également publier des paramètres supplémentaires sur le serveur si vous en avez besoin. Pour y parvenir, vous devez ajouter des attributs data à l'entrée de recherche :

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

Par exemple, dans ce cas, vous pouvez accéder à l'attribut data en PHP comme ceci :

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

Options jQuery

Nom	Taper	Requis	Description
chargé_à	Entier	Oui	Ceci est utilisé pour empêcher les robots de rechercher.
jeton	Chaîne	Oui	Ceci est utilisé pour empêcher les attaques CSRF.
URL	Chaîne	Non	Par défaut : ajax/process_livesearch.php.
cache	Booléen	Non	Cela fait référence à la mise en cache des requêtes Ajax. Par défaut : faux
form_anti_bot	Chaîne	Non	Par défaut : ajaxlivesearch_guard
slide_speed	Chaîne	Non	Par défaut : rapide
type_delay	Entier	Non	Par défaut : 350
entrée_max	Entier	Non	Par défaut : 20
min_chars_to_search	Entier	Non	Longueur minimale des caractères pour lancer la recherche. Par défaut : 0
pages_ranges	Tableau	Non	Par défaut : [0, 5, 10]
page_range_default	Entier	Non	Par défaut : 5
form_anti_bot_class	Chaîne	Non	Par défaut : ls_anti_bot
pied_classe	Chaîne	Non	Par défaut : ls_result_footer
page_classe_suivante	Chaîne	Non	Par défaut : ls_next_page
page_class_précédente	Chaîne	Non	Par défaut : ls_previous_page
page_limite	Chaîne	Non	Par défaut : page_limit
result_wrapper_class	Chaîne	Non	Par défaut : ls_result_div
classe_résultat	Chaîne	Non	Par défaut : ls_result_main
classe_conteneur	Chaîne	Non	Par défaut : ls_container
classe_pagination	Chaîne	Non	Par défaut : pagination
form_class	Chaîne	Non	Par défaut : recherche
chargé_à_classe	Chaîne	Non	Par défaut : ls_page_loaded_at
token_class	Chaîne	Non	Par défaut : ls_token
page_actuelle_classe_cachée	Chaîne	Non	Par défaut : ls_current_page
page_actuelle_lbl_class	Chaîne	Non	Par défaut : ls_current_page_lbl
dernière_page_lbl_class	Chaîne	Non	Par défaut : ls_last_page_lbl
total_page_lbl_class	Chaîne	Non	Par défaut : ls_last_page_lbl
page_range_class	Chaîne	Non	Par défaut : ls_items_per_page
classe_navigation	Chaîne	Non	Par défaut : navigation
arrow_class	Chaîne	Non	Par défaut : flèche

Événement personnalisé

Nom
surRésultatClic
onResultEnter
surAjaxComplete

Exemple:

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

    }
});

Déclencheur personnalisé

Nom
ajaxlivesearch:hide_result
ajaxlivesearch:recherche

Configuration PHP

Nom

Taper

Requis

Description

sources de données

Tableau

Oui

Source de données pour chaque champ de texte de recherche. Les clés font référence à l'identifiant HTML du champ. Actuellement, MySQL et mongoDB (en version bêta) sont pris en charge.

Configurations de source de données MySQL :

Nom	Taper	Requis	Description
hôte	Chaîne	Oui	Hôte de la base de données MySQL. Il s'agit généralement de « localhost ».
base de données	Chaîne	Oui	Nom de la base de données MySQL.
nom d'utilisateur	Chaîne	Oui	Nom d'utilisateur de la base de données MySQL.
passer	Chaîne	Oui	Mot de passe du nom d'utilisateur de la base de données MySQL.
tableau	Chaîne	Oui	Table de base de données MySQL dans laquelle la recherche en direct effectue la recherche.
colonnes de recherche	Tableau	Oui	Colonnes de recherche dans lesquelles la recherche en direct effectue une recherche. Il peut y en avoir une ou plusieurs. par exemple, array('column_name_1', 'column_name_2')
commandePar	Chaîne	Non	Colonne dans laquelle le résultat est ordonné en fonction de celle-ci.
Direction de la commande	Chaîne	Non	Sens de commande : 'ASC' ou 'DESC' pour 'orderBy'. Valeur par défaut : ASC
filtreRésultat	Tableau	Non	Colonnes qui doivent figurer dans le résultat. S'il est vide, toutes les colonnes seront renvoyées.
comparaisonOpérateur	Chaîne	Oui	Opérateur de comparaison de requêtes de recherche. Les valeurs possibles pour les opérateurs de comparaison sont : 'LIKE' et '='.
modèle de recherche	Chaîne	Oui	Ceci est utilisé pour spécifier comment la requête est recherchée. les valeurs possibles sont : `q`, `q`, `q`, `q`.
sensible aux majuscules et minuscules	Chaîne	Oui	Sensibilité à la casse des requêtes de recherche
résultat max	Entier	Non	Ceci est utilisé pour limiter le nombre maximum de résultats.
affichageEn-Tête	Tableau	Non	Ceci permet d'afficher ou de masquer l'en-tête dans le résultat. Si « actif » est défini sur vrai, l’en-tête est affiché. Il est également possible de mapper des colonnes sur différents titres.
taper	Chaîne	Oui	Type de source de données. Les valeurs actuellement possibles sont : « mysql » ou « mongo ».

antiBot

Chaîne

Oui

Ceci est utilisé comme technique de sécurité pour empêcher les soumissions de formulaires par les robots qui n'utilisent pas JavaScript. Dans cette technique, un champ masqué est renseigné à l'aide de jQuery avec cette valeur. Elle peut avoir n'importe quelle valeur, mais elle DOIT être la même que l'option `form_anti_bot` transmise au plugin jQuery. Par défaut, il est défini sur « ajaxlivesearch_guard ».

rechercheStartTimeOffset

Entier

Oui

Ceci est utilisé pour une autre technique de sécurité contre les robots. Certains robots soumettent immédiatement un formulaire une fois le chargement de la page terminé. Cependant, pour les êtres humains, il faut plus de temps pour remplir un champ. Par défaut, ce paramètre est réglé sur 3 secondes. Il n'est pas recommandé d'attribuer plus de 3 secondes.

maxInputLength

Entier

Oui

Ceci spécifie la longueur maximale des caractères dans le champ de recherche.

modèle

Chaîne

Oui

Ceci spécifie le nom du modèle situé dans le dossier des modèles

FAQ

Quel est le risque de désactiver l'anti_bot et le token ?
form_anti_bot est une fonctionnalité de sécurité intéressante, mais il devrait être possible de la supprimer. Pour y parvenir, vous devez modifier validateRequest() dans core/AjaxProcessor.php et supprimer $_POST['ls_anti_bot'] ainsi que modifier verifySessionValue($sessionParameter, $sessionValue) dans core/Handler.php . En revanche, la suppression du token permet à quiconque de créer un formulaire et d'utiliser votre serveur comme source de données et n'est donc pas recommandée. Actuellement, chaque fois que la page/le formulaire de recherche est chargé, un nouveau jeton est généré en appelant getToken() dans la page du formulaire ( index.php dans l'exemple actuel). Ensuite, le jeton et l'anti_bot sont vérifiés à l'aide de verifySessionValue($sessionParameter, $sessionValue) lors de la recherche/de l'envoi d'une nouvelle requête au serveur. Si cela vous semble exagéré, dans getToken() renvoyez le même jeton pour la session existante.
Comment masquer une colonne dans le résultat ?
Ceci peut être réalisé dans votre modèle. Un exemple peut être trouvé dans templates/hiddenColumn.php