Discussion :

[isicien]

Bonjour,
je travaille avec extjs et j'ai crée une page pour envoyer des mails. ce que je veux et quand je tape le premier caractère de l'adresse mail, une liste contenant toute les adresse mails commençant avec le caractère tapé. ainsi pour le 2ème...
comment puis je faire ça

[oneTime]

Cherche du côté de l'autocomplétion.

Le principe est simple : à chaque lettre tapée dans l'input, tu effectues une recherche dans ta banque d'emails.

Pour cela, tu dois placer un argument onkeyup sur ton input qui fait appel à une fonction javascript effectuant une requête PHP dans ta base de données (si tes emails sont contenus dans une base de données bien sûr).

Pour la requête PHP cherches du côté de SELECT... LIKE... LIMIT

Une fois que tu auras fais tout ça, affiche tes résultats dans un div et transforme-les en liens qui déclencherons une fonction permettant de remplacer ce que tu as entré dans l'input par l'adresse email recherchée

Bonne chance !

[DoubleU]

Regarde par ici

[Sylvain James]

Vous allez le faire tourner en bourrique :-)
Il y a - oh merci - désormais x solutions possible pour faire de l'autocomplétion.

Mais puisque il est parti sur le framework extjs, autant profiter de ce framework pour coder son autocomplétion... non ?

Tu trouveras un bon exemple à l'adresse suivante :
http://extjs.com/deploy/dev/examples...um-search.html

Voici en gros les étapes à respecter :

1. Définir une datasource. Le rôle de cette datasource est d'interroger une source distance (SQL ou autre), et de définir le format JSON attendu.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var ds = new Ext.data.Store({
        url: 'host/dossier/mesdatas.php',
        reader: new Ext.data.JsonReader({
            root: 'emails',
            totalProperty: 'totalCount',
            id: 'email_id'
        }, [
            {name: 'nom', mapping: 'nom_db'},
            {name: 'email', mapping: 'email_db'}
        ])
    });

2. Définir un template d'affichage pour chaque ligne résultat (dans l'autocomplete)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var resultTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div>',
               '<h3><span>Nom : {nom}<br />email: {email}</span></h3>',
            '</div>',
        '</tpl>');

3. Instancier le composant autocomplete. Il faut prévoir un champ input dans le flux HTML, sur lequel va se greffer le composant. L'id de ce champ sert de référence (dans mon exemple, inputSearchEmail) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'title',
        typeAhead: false,
        loadingText: 'Recherche en cours...',
        width: 570,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        applyTo: 'inputSearchEmail',
        itemSelector: 'div.search-item',
        onSelect: function(record){ // override default onSelect to do redirect
            alert('Email sélectionné !');
        }
    });

Bon courage :-)