Comment faire une autocomplétion de tag d'entrée html dans Ext.js?

Question

Si vous utilisez la bibliothèque Ext.js, comment est-ce que vous complétez automatiquement les zones de texte en entrée?

Plus précisément, comment procéder à la saisie semi-automatique en fonction des requêtes itératives Ajax (comme le jQuery autocomplete plugin où l'option Ajax est définie sur une URL de mise à jour).

Les pensées sont appréciées et merci de lire.

Answer 1

Depuis bmoueskau fourni une mise en œuvre en vedette tout à fait complet, je pensais un exemple plus rudimentaire pourrait aider.

var store = new Ext.data.JsonStore({ 
    url: '/your/ajax/script/', 
    root: 'data', // the root of the array you'll send down 
    idProperty: 'id', 
    fields: ['id','value'] 
}); 

var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'value', 
    typeAhead: true, 
    mode: 'remote', 
    queryParam: 'query', //contents of the field sent to server. 
    hideTrigger: true, //hide trigger so it doesn't look like a combobox. 
    selectOnFocus:true, 
    width: 250, 
    renderTo: 'autocomplete' //the id of the html element to render to. 
           //Not necessary if this is in an Ext formPanel. 
}); 

Le magasin acceptera les réponses de votre serveur formaté comme ceci:

{ 
    "success": true, 
    "data": [ 
     { 
      "id": 10, 
      "value": "Automobile" 
     }, 
     { 
      "id": 24, 
      "value": "Autocomplete" 
     } 
    ] 
} 

Bien sûr, vous pouvez également configurer votre magasin avec un Ext.data.XMLReader si c'est plus votre style.

J'espère que vous avez commencé. Je ne peux pas souligner assez l'awesomeness du Ext documentation. Il a quelques exemples pertinents en plus du combobox samples, que j'ai beaucoup utilisé quand j'ai fait quelques autocompleters.

Answer 2

Aucune fonctionnalité de saisie semi-automatique séparée ne peut être attachée de manière générique aux entrées - vous devez simplement utiliser un contrôle ComboBox avec filtrage côté serveur (vous pouvez utiliser la configuration "hideTrigger: true" pour qu'elle ressemble toujours à contribution). Ceci est probablement le plus proche par exemple à ce que vous voulez:

http://extjs.com/deploy/dev/examples/form/forum-search.html