Autocompletări cu ExtJS


Aţi făcut formulare în MS Access? Acolo exista o facilitate excelentă: puneai un câmp combobox în care puteai scrie o valoare, iar dacă exista deja în lista de valori asociată (extrasă de regulă printr-o interogare) o puteai selecta. De fapt se făcea autocompletare, iar dacă doreai ceva diferit continuai să scrii. Dacă nu aţi folosit combobox-uri în MS Access atunci tot trebuie să ştiţi la ce mă refer pentru că orice navigator modern oferă posibilitatea memorării unor valori introduse deja în formulare web (ca facilitate a navigatorului, nu a codului web). Aici apare însă problema: cu formularele web. În clipa când am trecut de la formulare MS Access la formulare web am simţit mult lipsa acestor combobox-uri. De ce? Pentru că în mod tradiţional, într-un formular web fie foloseşti input şi atunci utilizatorul poate introduce ce valoare vrea, dar nu poate reutiliza valori deja introduse; fie select şi atunci se pot utiliza valori existente în listă, dar nu se pot introduse valori noi.

img311

O soluţie extrem de urâtă, dar pe care am folosit-o (şi să vă spun drept o mai folosesc în unele webaplicaţii pe care le-am scris), este să foloseşti pentru aceeaşi entitate două câmpuri: unul select şi unul input. Da, e oribil şi ilogic. Dar poate salva ceva timp. Să zicem că vrei lista judeţelor: e simplu, sunt un număr fix de judeţe şi faci un select şi gata. Dar dacă vrei o listă de localităţi? Nu poţi avea o listă exhaustivă a lor. Un select din zecile/sutele/miile de localităţi existente deja în baza de date poate fi util… dar dacă e de introdus o localitate nouă?

Din fericire între timp au apărut framework-urile JavaScript. Prima mea orientare ar fi înspre jQuery (apropo: azi pe blogul Google Code unul dintre tehnicienii Google mărturiseşte că se folosesc de jQuery – ce reclamă frumoasă! precum cea făcută de WordPress care a trecut părţi mari de cod pe jQuery). Sunt diverse pluginuri jQuery pentru autocompletare. Dar mie mi-a atras atenţia soluţia oferită de ExtJS. Până acum pe CNet.ro nu am scris despre ExtJS decât când am prezentat o incredibilă temă WordPress ce foloseşte acest framework. M-am gândit să văd dacă mă poate ajuta în problema descrisă mai sus. Am găsit astfel pagina ce ilustrează ComboBox-urile ExtJS şi am rămas uimit de o afirmaţie: The combo box can very easily be used to convert existing select elements into auto-completing, filtering combos. Cum? Într-un formular pe care îl am deja pot converti uşor un select într-un combobox ExtJS? Partea cea mai grea a fost să includ fişierele JS şi CSS necesare, căci în rest codul a fost "afectat" doar de introducerea următoarelor linii:

<script language="JavaScript" type="text/javascript">
<!--
Ext.onReady(function(){
    var converted = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: ’all’,
        transform: ’judete’,
        forceSelection:true
    });
});
//-->
</script>

Da, în vreo 10 minute un câmp select a devenit ceea ce îmi doream din MS Access: editabil şi selectabil deopotrivă. Vedeţi în captura de sus folosit şi pentru câmpul prenume. Ajunge să scriu An că lista de prenume existentă se "subţiază" la Andrei şi Anton dar nimic nu mă împiedică să scriu Anghel de exemplu. Câmpul select a devenit select & input. Oh, şi cât de simplu. Nu includ vreun exemplu propriu pentru că exemplul oferit de ExtJS este suficient de lămuritor. Acum urmează desigur cândva să văd mai îndeaproape ExtJS (de exemplu mi-ar fi plăcut să pot să îmi construiesc fişierul JS necesar, doar cu componentele necesare, dar pentru moment nu am reuşit). Sunt însă foarte mulţumit că într-un timp atât de scurt, fără să citesc vreun rând de documentaţie ci doar din sursa exemplului oferit de situl ExtJS am reuşit să rezolv o problemă ce mă "chinuia" de mult. Dacă nu aţi folosit până acum combobox-uri în formulare (pentru simplul fapt că HTML-ul nu suportă aşa ceva) atunci merită să luaţi în consideraţie soluţia tocmai descrisă.

PS: Pentru "tehnicieni" în special aş mai face o observaţie. Soluţia ExtJS permite "alimentarea" dinamică (de exemplu cu o pagină ASP sau PHP extrageţi lista de valori şi le furnizaţi la select) sau statică (într-un fişier JScript creaţi un array cu valorile). În cazul alimentării statice desigur pare mai puţin logică folosirea unui combobox când un select clasic ar putea fi suficient, dar totuşi… eleganţa… vedeţi siguri şi convingeţi-vă.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu

  1. raul spune:

    Te rog sa afisezi un exemplu de cod pentru alimentarea select-ului dintr-un mysql cu php?


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *