Escritura intuitiva

[regalado]

Hola, quería preguntar si alguien tiene un buen código de lo que yo llamo 'escritura intuitiva', esto es, yo escribo algo en un cuadro de texto y en un select al lado me aparecen las opciones que cuadran con lo que estoy escribiendo. Si elijo alguna de las opciones, una serie de cuadros de texto se completan automáticamente.

Tengo hecho un código para hacer esto pero es bastante mejorable aunque no acabo de encontrar la forma de hacerlo:

Este php recoge los datos de la BBDD (todo OK)

Código PHP:

  <? 
//Connecto amb la BBDD 
$link = mysql_connect("localhost", "root"); 
mysql_select_db("baseDATOS", $link); 
 
//Array de clients x escriptura intuitiva 
$arClients = array(); //Creo l'array 
$it = 0;  //Iterador 
$cercaClients = mysql_query("SELECT * FROM llista"); 
 
//Provarem amb JavaScripts... 
echo "<script language=javascript>  "; 
echo "var miArray = new Array();  "; 
while($cerca=mysql_fetch_array($cercaClients)){ 
    $chupi = $cerca['titol']; 
    $nomcomercial = $cerca['interpret']; 
    $nif = $cerca['companyia']; 
    $arClients[$it] = $chupi; 
    echo "miArray[".$it."] = new Array(3); "; 
    echo "miArray[".$it."][0] = '".$chupi."'; "; 
    echo "miArray[".$it."][1] = '".$nomcomercial."'; "; 
    echo "miArray[".$it."][2] = '".$nif."'; "; 
    $it++; 
} 
echo "</script>"; 
?>   

Este el JavaScript que se encarga de comprobar lo que escribo, con qué elementos de la lista anteriormente generada coincide, si coincide lo añade como Option al Select, etc... X cierto, la llamada a la función intuitif() se hace en el cuadro de texto 'rsocial' con el evento onKeyUp, y la llamada a la función posaTot() en el select llamado 'posar' con el evento onChange.

Código:

<!-- ESCRIPTURA INTUITIVA -->
<script language="JavaScript">
function intuitif() { 
	var x;
	x = contracte2.rsocial.value;
	//window.alert('x: ' + x);
	if(x == ""){
		contracte2.nomcom.value = "";
		contracte2.nif.value = "";
		contracte2.dsocial.value = "";
		var it = 0;
		for(it=0;it<=miArray.length;it++){
			contracte2.posar.options[it] = null;	
		}
	}
	xm = x.toLowerCase();
	contracte2.posar.disabled = false;
	//variable = new Option("","","","");
	//contracte2.posar.options[0] = variable;
	var it = 1;
	for(it=1;it<=miArray.length;it++){
		//window.alert('it: ' + it);
		y = miArray[it-1][0];
		yK = String(y);
		yP = yK.toLowerCase();
		yKiero = yP.substring(0,x.length);
		window.alert('yKiero: ' + yKiero);
		if(x == yKiero){
			var it = 0;
			for(it=0;it<=miArray.length;it++){
				contracte2.posar.options[it] = null;	
			}
			variable = new Option(yK,yK,"","")
			window.alert('variable: ');
			contracte2.posar.options[it] = variable;
		} else{
			contracte2.posar.options[it] = null;
			contracte2.nomcom.value = "";
			contracte2.nif.value = "";
			contracte2.dsocial.value = "";
		}
	}
}

function posaTot(){
	minteressa = contracte2.posar.options[contracte2.posar.selectedIndex].value;
	for(m=0;m<miArray.length;m++){
		if(miArray[m][0] == minteressa){
			aketa = m;
		}
	}
	contracte2.nomcom.value = miArray[aketa][0];
	contracte2.nif.value = miArray[aketa][1];
	contracte2.dsocial.value = miArray[aketa][2];
}
</script>

En fin, que si alguien tiene algo que me pueda servir sería fantástico, y si no pues ahí queda el código para quien le pueda sacar algún provecho

[derkenuke]

Me acuerdo que hicimos ya un ejemplo en el foro para que al ir escribiendo en una caja de texto se muestren las opciones del select que coinciden. Creabamos cada vez que saltaba el evento onkeyup, una expresión regular tipo "^"+textoDeLaCaja, y todas las opciones que coincidieran, se quedaban.

Lástima que no encuentre el mensaje, pero el código era sencillo.

Un saludo.

PD: Intenta no postear código PHP, sobre todo si tiene bases de datos, no podremos probarlos.

[regalado]

Lástima, yo también estuve buscando antes de crear el tema y no encontré nada....

[lexus]

intenta con este a ver si te sirve, esta solo en javascript pero es muy facil de adaptar con una base de datos.


aunke creo yo ke seria mas eficiente y mucho mejor hacerlo con ajax.


<script language="javascript">
var to_find = "";
var timeoutCtr = 0;
var selectBox;
var txtFind;
var keycode;
function findMatch2(s, t){
timeoutCtr = new Date().getTime();
selectBox = s;
txtFind = t;
keycode = event.keyCode;
setTimeout("findMatch()", 10);
}

function findMatch() {
if (new Date().getTime() - timeoutCtr < 0) return false;
if (txtFind == '' || keycode == 16) {
return false;
}
to_find = txtFind.value
if(keycode==8) to_find = to_find.substr(0, to_find.length-1);
if(to_find.length==0){
txtFind.value='';
return false;
}
allWords = selectBox.options;
var posLow = 0;
var posHigh = allWords.length;
var foundIt = false;
s2 = to_find.toLowerCase();
while (posLow <= posHigh) {
posMid = Math.floor((posLow + posHigh) / 2);
s1 = allWords[posMid].text;
s = allWords[posMid].text.toLowerCase();
if (s.indexOf(s2) == 0){
go = true;
for (var i=posMid; i>=0; i--){
if(allWords[i].text.toLowerCase().indexOf(s2) == 0){
s1 = allWords[i].text;
s = allWords[i].text.toLowerCase();
} else {
break;
}
}
posMid = i+1;
foundIt = true;
selectBox.selectedIndex = posMid;
var t = s.length - (s.length - s2.length);
end_string = s.substr(t, s.length);
txtFind.value = s1;
if (end_string != "") {
var range = txtFind.createTextRange();
range.moveStart('character', txtFind.value.toLowerCase().lastIndexOf(end_string ));
range.select();
}
return true;
} else {
if (s2 < s) {
posHigh = posMid - 1;
} else {
posLow = posMid + 1;
}
}
}
}
function getInfo(e, obj){
if(e.selectedIndex>=1) obj.value=e[e.selectedIndex].text;
}
</script>
<form>
<select name="city" style='display:inline;width:275;position:absolute; Clip:rect(auto auto auto 257px);' onchange="getInfo(this, this.form.txtServer);">
<option value="Acampo">Acampo</option><option value="Acton">Acton</option><option value="Adelanto">Adelanto</option><option value="Adin">Adin</option><option value="Agoura Hills">Agoura Hills</option><option value="Aguanga">Aguanga</option><option value="Ahwahnee">Ahwahnee</option><option value="Alameda">Alameda</option><option value="Alamo">Alamo</option><option value="Albany">Albany</option><option value="Albion">Albion</option><option value="Alderpoint">Alderpoint</option><option value="Alhambra">Alhambra</option><option value="Aliso Viejo">Aliso Viejo</option><option value="Alleghany">Alleghany</option><option value="Alpaugh">Alpaugh</option><option value="Alpine">Alpine</option><option value="Alpine Meadows">Alpine Meadows</option><option value="Alta">Alta</option><option value="Alta Loma">Alta Loma</option><option value="Altadena">Altadena</option><option value="Altaville">Altaville</option><option value="Alturas">Alturas</option><option value="Alviso">Alviso</option><option value="Amador City">Amador City</option><option value="Amboy">Amboy</option><option value="American Canyon">American Canyon</option><option value="Anaheim">Anaheim</option><option value="Anderson">Anderson</option><option value="Angels Camp">Angels Camp</option><option value="Angelus Oaks">Angelus Oaks</option><option value="Angwin">Angwin</option><option value="Annapolis">Annapolis</option><option value="Antelope">Antelope</option><option value="Antioch">Antioch</option><option value="Anza">Anza</option><option value="Apple Valley">Apple Valley</option><option value="Applegate">Applegate</option><option value="Aptos">Aptos</option><option value="Arbuckle">Arbuckle</option><option value="Arcadia">Arcadia</option><option value="Arcata">Arcata</option><option value="Armona">Armona</option><option value="Arnold">Arnold</option><option value="Aromas">Aromas</option><option value="Arroyo Grande">Arroyo Grande</option><option value="Artesia">Artesia</option><option value="Artois">Artois</option><option value="Arvin">Arvin</option><option value="Atascadero">Atascadero</option><option value="Atherton">Atherton</option><option value="Atwater">Atwater</option><option value="Atwood">Atwood</option><option value="Auberry">Auberry</option><option value="Auburn">Auburn</option><option value="Avalon">Avalon</option><option value="Avenal">Avenal</option><option value="Avery">Avery</option>
</select>
<input name="txtServer" type="text" style='position:relative;width:260;height:21;margi n-right:15;margin-top:-1px;' value="[Select City]" onKeyPress="findMatch2(this.form.city, this);" onfocus="var range = this.createTextRange();range.moveStart('character' ,0);range.select();">
</form>

[derkenuke]

Hola lexus, está bien ese script que te autocompleta, pero sólo funciona en IE, tiene acciones sólo referidas a él.

Yo me refería a una cosa más sencilla, así:

Código PHP:

  <select id="sel" size="4" style="width:150px;">
    <option>Uno</option>
    <option>Otras</option>
    <option>Algo</option>
    <option>Algunas</option>
</select> <br/>
<input type="text" id="caja" onkeyup="actualizaSel(this.value)" style="width:150px;" />

<script>

var elSel=document.getElementById("sel");
var laCaja=document.getElementById("caja");

//guardamos todas las option en un array
for( var opciones=new Array, i=0; i<elSel.options.length; i++) {
    opciones[i]=new Option( elSel.options[i].text, elSel.options[i].value );
}

//función que según lo que haya escrito en la caja de texto, filtra las opciones del select
function actualizaSel(valor) {            //si valor está vacío encajarán todas las opciones
    var re=new RegExp("^"+valor, "i");    //sin dependencia de mayúsculas y minúsculas
    //quitamos todos los elementos del select
    while( elSel.options.length > 0 )
        elSel.options[0] = null;
    //colocamos sólo los elementos que encajen con re
    for(var i=0; i<opciones.length; i++) {
        if( re.test(opciones[i].text) )
            elSel.options[ elSel.options.length ] = opciones[i];
    }
}

</script>  
  

Puedes quitarlos, o puedes desactivar las opciones (algo complicado para el usuario cuando las opciones no las tienes ordenadas alfabéticamente), lo que tú más prefieras.


Un saludo.