Autocompleter.Local()

Vous pouvez consulter la page Autocompleter.Base(class) qui donne les détails de paramétrage de l'objet Autocompleter.Local().
Cette page présente des exemples d'utilisation de cet objet.

Exemple simple d'utilisation de Autocompleter.Base() Exemple complexe d'utilisation de Autocompleter.Base()

Exemple simple d'utilisation de Autocompleter.Base()

Cet exemple montre comment utiliser à partir d'un tableau de données Javascript local à la page le concept de recherche intuitive à partir d'un champ de saisie texte.
L'exemple est testable ci après :

Cet exemple permet à partir d'un caractère de rechercher dans le tableau de données local les artistes dont le nom commence par le caractère saisi.

Le code de l'exemple est présenté ci après dans l'ordre suivant :

• code HTML des éléments DOM permettant l'interrogation et l'affichage des données.
• code Javascript définissant le tableau de données et l'objet de recherche intuitive.

Code HTML :
<input id="groupe" autocomplete="off" size="40" type="text" value="" /></p> <div class="page_name_auto_complete" id="listeGroupe" style="display:none"></div>
Code Javascript :
<script type="text/javascript"> // tableau de groupes var tGroupe = ['ABBA', 'Alpha Blondy', 'Anthony B', 'Apple Gabriel', 'Babylon Circus', 'Black Roots', 'Black Uhuru', 'Bob Marley & the Wailers', 'Burning Spears', 'Danakil' , 'Daweh Congos', 'Don Carlos', 'Dub Incorporation', 'Ernest Ranglin', 'Gladiators', 'Horace Handy', 'Israel Vibrations', 'Jacob Miller', 'Jah Cure', 'K2R', 'King Tubby', 'Lee Scratch Perry', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']; // objet de recherche intuitive locale new Autocompleter.Local('groupe', 'listeGroupe', tGroupe, { minChars : 1 }); </script>

Exemple complexe d'utilisation de Autocompleter.Base()

Cet exemple vous permet de paramétrer la recherche intuitive à partir du champ de recherche.
Le tableau de données est le même que dans le premier exemple de cette page.
L'exemple est testable ci après :

Nombre minimum de caractères (minChars) : 1 234 5
Respecter la casse (ignoreCase) ? : oui (true) non (false)
Recherche complète (fullSearch) : oui (true) non (false)
Recherche partielle (partialSearch) : oui (true) non (false)

Le code source de l'exemple est présenté ci après avec dans l'ordre :

• code HTML des éléments DOM permettant l'interrogation et l'affichage des données.
• code Javascript définissant le tableau de données et l'objet de recherche intuitive.

Code HTML :
Nombre minimum de caractères (minChars) : <select id="nbChar"><option value="1">1</option> <option value="2">2</option><option value="3">3</option><option value="4">4</option> <option value="5">5</option> </select> <br/> Respecter la casse (ignoreCase) ? : <select id="casse"><option value="true">oui (true)</option> <option value="false">non (false)</option> </select> <br/> Recherche complète (fullSearch) : <select id="recComplete"><option value="true">oui (true)</option> <option value="false">non (false)</option> </select> <br/> Recherche partielle (partialSearch) : <select id="recPartial"><option value="true">oui (true)</option> <option value="false">non (false)</option> </select> <br/> <input id="groupe" autocomplete="off" size="40" type="text" value="" /></p> <div class="page_name_auto_complete0" id="listeGroupe" style="display:none"></div>
Code Javascript :
<script type="text/javascript"> // tableau de groupes var tGroupe = ['ABBA', 'Alpha Blondy', 'Anthony B', 'Apple Gabriel', 'Babylon Circus', 'Black Roots', 'Black Uhuru', 'Bob Marley & the Wailers', 'Burning Spears', 'Danakil' , 'Daweh Congos', 'Don Carlos', 'Dub Incorporation', 'Ernest Ranglin', 'Gladiators', 'Horace Handy', 'Israel Vibrations', 'Jacob Miller', 'Jah Cure', 'K2R', 'King Tubby', 'Lee Scratch Perry', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']; // objet de recherche intuitive locale new Autocompleter.Local('groupe', 'listeGroupe', tGroupe, { minChars : Number($F('nbChar')) , ignoreCase : Boolean($F('casse')) , fullSearch : Boolean($F('recComplete')) , partialSearch : Boolean($F('recPartial')) }); </script>

: 09/01/2007 22:24:42 | : Scriptaculous, Scriptaculous.js, Autocompleter.Local, Autocompleter, Autocompleter.Base, autocompletion, recherche, intuitive, exemple, utilisation,

Aucun commentaire enregistré