Bootstrap Typeahead

Introduction

Dans ce tutoriel, vous verrez comment utiliser Bootstrap pour créer un Typeahead.

Typeahead fournit des indices ou des données aux utilisateurs lorsqu'ils remplissent des formulaires.

Bootstrap vous permet de créer des Typeahead très esthétiques, et il est facile à étendre ; vous pouvez améliorer ses fonctionnalités sans changements majeurs.

Ce qui est requis

Typeahead est une fonctionnalité de Bootstrap 2.x, donc ce tutoriel utilise Bootstrap 2.0 pour les tests.

Vous devez référencer deux fichiers JavaScript, jquery.js et bootstrap-typeahead.js, tous deux situés dans docs/assets/js/.

L'exemple suivant montre comment créer un Typeahead en utilisant uniquement le balisage, sans écrire de JavaScript.

Exemple

Exemple

<div class="well">
    <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Ahmedabad&quot;,&quot;Akola&quot;,&quot;Asansol&quot;,&quot;Aurangabad&quot;,&quot;Bangaluru&quot;,&quot;Baroda&quot;,&quot;Belgaon&quot;,&quot;Berhumpur&quot;,&quot;Calicut&quot;,&quot;Chennai&quot;,&quot;Chapra&quot;,&quot;Cherapunji&quot;]">
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>

Vous pouvez appeler Typeahead via JavaScript et améliorer ses fonctionnalités en utilisant différentes options. L'utilisation de l'appel de Typeahead via JavaScript est la suivante :

$('#example').typeahead()
Ici, 'example' est l'id du champ de saisie auquel vous souhaitez appliquer typeahead.

Exemple

Exemple

<div class="well">
    <input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
<script>
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
    $('#search').typeahead({source: subjects})
</script>

Options

Vous pouvez utiliser diverses options de Typeahead. Ci-dessous se trouve une explication détaillée de chaque option :

source: Spécifie la source de données contenant les valeurs à afficher lors de la requête. Le type de données est array, et la valeur par défaut est [ ].

items: Spécifie le nombre maximum d'entrées à afficher lors d'une requête. Le type de données est number, et la valeur par défaut est 8.

matcher: Détermine si une requête correspond à une entrée. Il prend un seul paramètre, qui est l'entrée à tester par rapport à la requête. La requête actuelle est accessible via this.query. Renvoie une valeur booléenne true indiquant que la requête correspond. Le type de données est function. Par défaut, il est insensible à la casse.

sorter: Utilisé pour classer automatiquement les résultats. Il prend un seul paramètre, une entrée limitée à l'instance typeahead. La requête actuelle est accessible via this.query. Le type de données est function. La valeur par défaut est correspondance exacte, et d'autres valeurs peuvent être sensibles à la casse ou insensibles à la casse.

highlighter: Utilisé pour mettre en surbrillance automatiquement les résultats. Il prend un seul paramètre, une entrée limitée à l'instance typeahead. Le type de données est function. Par défaut, il met en surbrillance toutes les correspondances par défaut.

Méthodes

.typeahead(options)

Il initialise un champ de saisie avec Typeahead.

Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.

Autres extensions