Suggerimento Testo (tipo Google Suggest)

[DarCas]

Salve,
ho da poco approntato sul mio sito un sistema che permette di suggerire la frase che si sta scrivendo in un campo di ricerca.

Il sistema prende questi dati da un database il quale si aggiorna ogni volta che viene inserito un nuovo termine di ricerca, il quale produce un risultato. (a breve si baserà anche sui termini ricercabili tra i contenuti, ma non è questo il problema).

Il codice implementato è questo:

function wSuggest ( objCampo ) {
 if (document.all) {
  if (SuggestWords) {
   var arr = SuggestWords.split("|");
   var selezione = false;
   var stringa = objCampo.value;
   if ((event.keyCode!=46)&&(event.keyCode!=8)) {
	if (stringa.length>0) {
	 if (event.keyCode==8&&selezione) { objCampo.value = stringa.substr(0,stringa.length-1); stringa = objCampo.value; }
	 var selectionStart = stringa.length;
	 for (i=0; i<arr.length; i++) {
	  if (arr[i].substr(0, stringa.length) == stringa) {
	   objCampo.value = arr[i];
	   var selectionEnd = objCampo.value.length;
	   if (objCampo.setSelectionRange) { objCampo.focus(); objCampo.setSelectionRange(selectionStart, selectionEnd); }
	   else if (objCampo.createTextRange) { var range = objCampo.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); }
	   break;
	  }
	 }
	}
   }
  }
 }
}

Come potete vedere dal codice, ho un variabile SuggestWords la quale riempio tramite XML HTTP (sempre JS) ogni volta che aggiorno la pagina.

Come potete vedere sempre dal codice, il sistema funziona solo con Internet Explorer: ed è questo che mi da noia!!!

Come nel caso di Google Suggest vorrei che il sistema funzioni anche con Mozilla Firefox, ma non riesco a capire come implementare le funzioni di per evidenziare il testo aggiunto di volta in volta dalla funziona.

Come posso farlo funzionare anche con Firefox?


P.S.
Il mio sito è www.darcas.net ed il campo di ricerca (in alto a dx) per il momento deve essere ancora istruito sui termini, ora risponde a parole come "computer, einstein, neutrino, telecomunicazioni, telefonia" ma nulla vieta che ci siano altri termini.

[alexdem24]

ciao.
qualche settimana fa avevo implementato una cosa del genere, che pero' era orientato piu che altro ad un select autocompletante.

Se ti interessa, dacci un'occhiata.

E' visibile anche da firefox.
ciao

http://forum.html.it/forum/showthrea...hreadid=801404

[DarCas]

Ciao,
scusa se ti rispondo solo ora...

Ho visto il tuo ottimo script, è sto provando ad implementarlo, anche se non finirò per oggi.. entro martedì dovrei finirlo, quando torno dalle vacanze.

Cmq il tuo script m'implementa il menu a tendina come quello di Google Suggest, ma non mi risolve il problema dell'evidenziazione del testo, sempre come fa Google Suggest.

Tu hai visto come fà?
Possibile che gli hacker di google sono così geniali per noi... :master:

[alexdem24]

a dire il vero, per il fatto della selezione, avevo implementato un'altra funzione, la quale chiamata e' commentata xche' non finita. Queta funzione ti permette di utilizzare le frecce su e giu per selezionare i campi che ti interessano.
Se vuoi testarne la funzionalita', la funzione si chiama "Arrowmovement" e l'unica cosa che devi fare e' decommentare la seguente riga:

//Arrowmovement(event,value);

Appena ho tempo la finiro'.

Se hai consigli, sono bene accetti.

ciao

[DarCas]

La avevo già notata la funzione, ma io mi riferisco al fatto che mano a mano che scrivo le parole si autocompilano, ma la parte che aggiungo in automatico rimane selezionata, così se non è quella la parola basta che continuo a scrivere e la cambio, magari andando a suggerire le altre possibilità... non so se son stato chiaro!! :master:

[alexdem24]

si, ho capito cosa vuoi dire.
Ci avevo pensato a farlo, ma quelo che volevo fare era creare la parte suggerita in un'altro colore, ma ho dovuto indietreggiare dall'incompatibilita' con gli standard.
Appena ho un'attimo di tempo vedo se riesco a modificare la funzione per selezionare la parte suggerita..

ciao

[DarCas]

Originariamente inviato da alexdem24
si, ho capito cosa vuoi dire.
Ci avevo pensato a farlo, ma quelo che volevo fare era creare la parte suggerita in un'altro colore, ma ho dovuto indietreggiare dall'incompatibilita' con gli standard.
Appena ho un'attimo di tempo vedo se riesco a modificare la funzione per selezionare la parte suggerita..

ciao

In che senso andavi fuori standard?

[alexdem24]

che in un campo di testo form, non c'e' una possibilita' di inserire del testo colorato, se non con trucchi per aggirarne il problema. Ma in questo modo andavo a toccare la compatibilita' con altri browser e non sarebbe mai stato codice standard !!

[DarCas]

chiarissmo ora...

[DarCas]

Ecchime qua,
ho la soluzione, spero possa essere utile a qualcuno..

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

function textboxSelect ( oTextbox, iStart, iEnd ) {

 switch(arguments.length) {

  case 1: oTextbox.select(); break;
  case 2: iEnd = oTextbox.value.length;
  case 3:
   if (isIE) {

	var oRange = oTextbox.createTextRange();
	oRange.moveStart("character", iStart);
	oRange.moveEnd("character", -oTextbox.value.length + iEnd);
	oRange.select();

   } else if (isMoz) oTextbox.setSelectionRange(iStart, iEnd);

 }

 oTextbox.focus();

}

function textboxReplaceSelect ( oTextbox, sText ) {

 if (isIE) {

  var oRange = document.selection.createRange();
  oRange.text = sText;
  oRange.collapse(true);
  oRange.select();

 } else if (isMoz) {

  var iStart = oTextbox.selectionStart;
  oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
  oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);

 }

 oTextbox.focus();

}

function autocompleteMatch ( sText ) {

 var arrValues = ["casa","cane","ciccio","miao","quello che te pare"];
 for (var i=0; i < arrValues.length; i++) if (arrValues[i].indexOf(sText) == 0) return arrValues[i];
 return null;

}

function autocomplete ( oTextbox, oEvent ) {

 switch (oEvent.keyCode) {

  case  8: return true; break; // Backspace
  case  9: return true; break; // TAB
  case 13: return true; break; // Invio
  case 16: return true; break; // Shift
  case 17: return true; break; // CTRL
  case 18: return true; break; // ALT
  case 20: return true; break; // Caps Lock
  case 27: return true; break; // Esc
  case 33: return true; break; // Pagina Su
  case 34: return true; break; // Pagina Giù
  case 35: return true; break; // Fine
  case 36: return true; break; // Home
  case 37: return true; break; // Freccia Sinistra
  case 38: return true; break; // Freccia Su
  case 39: return true; break; // Freccia Destra
  case 40: return true; break; // Freccia Giù
  case 46: return true; break; // Canc
  default:

   textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
   var iLen = oTextbox.value.length;
   var sMatch = autocompleteMatch(oTextbox.value);
   if (sMatch != null) {
	oTextbox.value = sMatch;
	textboxSelect(oTextbox, iLen, oTextbox.value.length);
   }

   return false;

  break;

 }

}

il campo dev'essere così:

<input type="text" value="" id="txt1" onKeyPress="return autocomplete(this, event)" autocomplete="off">

il tutto è compatibile anche con Firefox Mozilla...
Ciao