AJAJ Autocompleter

In incercarile de a reduce cat de mult posibil cantitatea de date transportata intre server si client in mod asincron, am renuntat la a mai folosi XML ca standard, facand trecerea catre JSON (puteti incepe de aici). Majoritatea solutiilor au devenit astfel “AJAJ based”.

Cu siguranta fiecare dintre voi a folosit sau cel putin testat la un moment dat Autocompleter-ul Script.aculo.us. Ei bine, aceasta modalitate de autocomplete este buna, mai putin faptul ca trebuie generat server-side intreg UL-ul corespunzator rezultatelor. Aceasta metoda are doua dezavantaje:

• Cantitatea mai mare de date. Fac o mica paranteza aici. Sunt perfect constient de faptul ca exemplul autocompleter-ului nu este tocmai relevant din acest punct de vedere. Orice solutie de autocomplete va trebui oricum sa intoarca un numar relativ mic de rezultate, altfel avantajul utilizatorului devine nul, el trebuind sa scaneze atent sugestiile ce ar trebui sa ii scurteze munca. Ma folosesc totusi de acest exemplu pentru ca vreau sa pregatesc terenul pentru un articol viitor care va ilustra perfect avantajul unei solutii mai “light”.
• Amestecul markup-ului pe partea server. Si aici simt nevoia de justificari suplimentare. Atunci cand e vorba de o singura persoana implicata intr-un proiect / parte a unui proiect, legatura intre back-end si front-end este mult mai stransa. Dar, cand este vorba de echipe in cadrul carora fiecare persoana este responsabila doar de una din aceste parti, atunci separarea cat mai clara intre acesta este indicata.

Revenind la exemplul Autocompleter-ului Script.aculo.us, acesta poate fi rapid ajustat pentru lucrul cu date in format JSON, prin simpla “suprascriere” a functiei ce se ocupa de inserarea in pagina a rezultatelor transferului in felul urmator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
	if (!this.changed && this.hasFocus) {
 
		this.update.update('<ul></ul>');
 
		response = choices.evalJSON();
		if (response) {
			response.each((function (suggestion) {
				this.update.down('ul').insert((new Template("<li>#{text}</li>")).evaluate({text: suggestion}));
				}).bind(this));
			}
 
		Element.cleanWhitespace(this.update);
		Element.cleanWhitespace(this.update.down());
 
		if (this.update.firstChild && this.update.down().childNodes) {
			this.entryCount = this.update.down().childNodes.length;
			for (var i = 0; i < this.entryCount; i++) {
				var entry = this.getEntry(i);
				entry.autocompleteIndex = i;
				this.addObservers(entry);
				}
			} else { 
				this.entryCount = 0;
				}
 
		this.stopIndicator();
		this.index = 0;
 
		if (this.entryCount == 1 && this.options.autoSelect) {
			this.selectEntry();
			this.hide();
			} else {
				this.render();
				}
		}
	}

Doar liniile 4-11 sunt cele modificate, restul reprezinta functia initiala. Sfatul meu este sa nu editati direct libraria controls.js din Script.aculo.us, pentru ca orice modificare direct pe fisierele librariei va duce la ingreunarea unui viitor update, trebuind operate de fiecare data schimbarile pe noua versiune. Mult mai simplu este sa includeti pur si simplu codul de mai sus intr-un fisier ce va fi incarcat dupa Script.aculo.us.

Related posts:

1. Prototype: Carousel – Update
2. Closure: Extend ui.DatePicker to highlight events

Comments

• Articole recente

  • PHP SoapClient port bug workaround
  • Reset / change Windows 7 / Vista / XP password using a Ubuntu CD
  • Closure: Extend ui.DatePicker to highlight events
  • Google Analytics goal steps recorded as exit pages
  • Synchronizing tasks between Trac and Netbeans
  • Prototype: Hotkeys
  • Detectarea platformelor mobile in PHP
  • FTL jump … now!
  • Prototype: Carousel – Update
  • Prototype: Zoomer

• Categorii

  • Analytics
  • Development
  • JavaScript
  • Lifehacks
  • Linux
  • Personal
  • PFA
  • PHP
  • www

• Tweets