jquery autocompleter

Plugin de saisie semi-automatique jQuery

Démo

Ici : Exemple avec les couleurs Crayola.

Usage

Installation

npm :

npm install --save jquery-autocompleter

Fil:

yarn add jquery-autocompleter

Ajoutez un plugin à votre projet

• inclure jQuery :

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• inclure le code du plugin :

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• appelez le plugin :

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

Exemples

• URL distante

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• plaine

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

Possibilités

La saisie semi-automatique propose les options suivantes :

Nom	Taper	Description	Sourd
source	str, obj	URL vers le serveur ou un objet local	nul
commeLocal	bouffon	Analyser la réponse à distance en tant que source locale	FAUX
vide	bouffon	Lancer si la valeur est vide	vrai
limite	int	Nombre de résultats à afficher	10
minLongueur	int	Longueur minimale pour le remplissage automatique	0
retard	int	Quelques millisecondes pour différer la demande	0
Classe personnalisée	tableau	Tableau avec des classes personnalisées pour l'élément de saisie semi-automatique	[]
cache	bouffon	Enregistrez les données xhr sur localStorage pour éviter la répétition des demandes	vrai
cacheExpire	int	Durée de vie des données localStorage en secondes (0 pour désactiver l'expiration du cache)	86400
focusOuvrir	bouffon	Lancer la saisie semi-automatique lorsque la saisie obtient le focus	vrai
entrerSélectionner	bouffon	Permet de sélectionner à l'aide de la touche Entrée	vrai
indice	bouffon	Ajoutez un indice à la saisie avec la première étiquette correspondante, les styles corrects doivent être installés	FAUX
sélectionnerPremier	bouffon	S'il est défini sur true , le premier élément de la liste de saisie semi-automatique sera sélectionné automatiquement, ignorez si changeWhenSelect est activé	FAUX
changerQuandSélectionner	bouffon	Permet de modifier la valeur d'entrée à l'aide des touches fléchées de navigation dans la liste de saisie semi-automatique	vrai
HighlightMatches	bouffon	Cette option définit le retour à la balise <strong> pour les correspondances dans les résultats de saisie semi-automatique.	FAUX
CodeCléignoré	tableau	Tableau avec des codes clés ignorables, par défaut : 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
étiquette personnalisée	str	Le nom de la propriété de l'objet qui sera utilisée comme étiquette	FAUX
valeur personnalisée	str	Le nom de la propriété de l'objet qui sera utilisée comme valeur	FAUX
onBeforeSend	fonction	Cette fonction est déclenchée avant une requête ajax	$.noop
surAvantAfficher	fonction	Cette fonction est déclenchée lorsque la liste est prête à être affichée	$.noop
surVide	fonction	Si la liste de données est vide, déclenchez cette fonction	$.noop
surArticle	fonction	Cette fonction est déclenchée lorsque chaque élément est en cours de préparation pour être affiché	$.noop
surListeOuverte	fonction	Cette fonction est déclenchée lorsque la liste est affichée	$.noop
surListeFermer	fonction	Cette fonction se déclenche lorsque la liste est masquée	$.noop
suravant le lancement	fonction	L'événement a été déclenché avant la nouvelle requête (y compris le cache local)	$.noop
modèle	str	Modèle personnalisé pour les éléments de liste. Par exemple : <span>{{ label }} is {{ customPropertyFromSource }}</span> . Le modèle s'ajoute à .autocompleter-item .	FAUX
compenser	str	Décalage de réponse source, par exemple : "response.items.posts" . @déprécié, utilisez plutôt format	FAUX
format	fonction	Formater la charge utile de la réponse pour renvoyer les données sources	nul
combiner	fonction	Renvoie un objet qui étend les données ajax. Utile si vous souhaitez transmettre des options de serveur supplémentaires	$.noop
rappel	fonction	Sélectionnez la fonction de rappel de valeur. Arguments : value , index , object	$.noop

Méthodes

Changer l'option une fois le plugin défini

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

Par exemple:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

Ouvrir la liste

 $ ( "#input" ) . autocompleter ( "open" ) ; 

Fermer la liste

 $ ( "#input" ) . autocompleter ( "close" ) ; 

Détruire le plugin

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

Effacer tout le cache

 $ . autocompleter ( "clearCache" ) ; 

Définir les valeurs par défaut

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

Encore un exemple

Compléteur automatique pour la saisie du prénom avec mise en cache, mise en évidence des correspondances et limite de 5 résultats. La réponse à distance dépend du sexe :

Balisage de formulaire

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

Code

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

Balisage

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >