Textruta Autofylld

Jag har en lista med Värden

<Select size="4">
<option value="Fordon">Mat</option>
<option value="Fordon">Fordon</option>
</select>

osv

Nu vill jag ha ett vanligt textfält under denna selecten som fylls med det man markerar i Selectlistan.
Tex

<Select size="4">
<option value="1">Mat</option> <--- Markerad med musen
<option value="1">Fordon</option>
</select>

<input type="text" value="Mat">

Man måste kunna ändra värdet på textfältet eftersom man ska kunna uppdatera varje del i selectlistan.

Jag har kikat på Jojoxx script http://www.jojoxx.net/jscript/archive/formsearchlist.html
Men problemet är att alla värden i selectlistan försvinner då man ändrar texten som visas i Textfältet.

jojoxx script utan onkeypress och onkeyup på textboxen borde väl funka som du vill?

<script type="text/javascript">
var ignorevw=false; // Skall V eller W ignoreras?
var lista = new Array();
function searchlist(value,listobj){
	if(lista.length == 0) buildlist(listobj);
	matches=0;
	listobj.length = lista.length;
	for(n=0;n<lista.length;n++){
		if(lista[n].text.substring(0,value.length)==value||ignorevw&&lista[n].text.substring(0,value.length).replace(/w/g,'v')==value.replace(/w/g,'v')) {
			listobj[matches].text = lista[n].text;
			listobj[matches].value = lista[n].value;
			matches++;
		}
	}
	listobj.length = matches;
	listobj.selectedIndex=0;
}
function buildlist(obj){
	for(n=0;n<obj.length;n++){
		lista[n] = new makeobj(obj[n].value,obj[n].text);
	}
}
function makeobj(value,text){
	this.value=value; this.text=text;
}
</script>

<form>
<input type="text" name="search" style="width: 150px;"><br>
<select name="lista" size="4" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">
<option value="apelsin">apelsin</option>
<option value="apelsinsaft">apelsinsaft</option>
<option value="banan">banan</option>
<option value="bananskal">bananskal</option>
<option value="citron">citron</option>
<option value="citronskiva">citronskiva</option>
<option value="citronsaft">citronsaft</option>
</select>
</form>

Är det något sånt här du är ute efter?
http://www.mattkruse.com/javascript/autocomplete/

Suveränt Quid, Tack!

Nu vill jag ha 4st Selectboxar brevid varandra.
Varje Selectbox ska ha en textbox under den.
Typ såhär

<Select size="4">
<option value="Mat">Mat</option>
<option value="Fordon">Fordon</option>
</select>
<input type="text">

<Select size="4">
<option value="Mat">Mat1</option>
<option value="Fordon">Fordon1</option>
</select>
<input type="text">

<Select size="4">
<option value="Mat">Mat2</option>
<option value="Fordon">Fordon2</option>
</select>
<input type="text">

<Select size="4">
<option value="Mat">Mat3</option>
<option value="Fordon">Fordon3</option>
</select>
<input type="text">

När man tex markerar "Mat" i den översta selectboxen så vill jag att "Mat1" "Mat2" och "Mat3" i dom andra selectboxarna automatiskt markeras. Dom ska vara relaterade till varandra på nåt sett. När alla 4 då blivit markerade så ska respektive markering visas i en egen textbox under respektive selectbox som Quid gör ovan.

Jag har löst problemet med att ha 4 selectboxar med ett respektive textfält under varje som fylls i då man markerar ett värde i selectboxen.

Men hur gör jag så att om man tex markerar "Mat" i den översta selectboxen så markeras "Mat1" "Mat2" och "Mat3" i dom andra selectboxarna automatiskt?

Och markerar jag "Fordon" så markeras "Fordon1" "Fordon2" och "Fordon3" i dom andra selectboxarna automatiskt?

Jag hittade ett script som fungerar som jag vill, men hur bakar jag in båda Onchange eventen i selectlistan?
Såhär har jag nu

var lista = new Array();
function AutoDisplay(value,listobj){
	if(lista.length == 0) buildlist(listobj);
	matches=0;
	listobj.length = lista.length;
	for(n=0;n<lista.length;n++){
		if(lista[n].text.substring(0,value.length)==value||ignorevw&&lista[n].text.substring(0,value.length).replace(/w/g,'v')==value.replace(/w/g,'v')) {
			listobj[matches].text = lista[n].text;
			listobj[matches].value = lista[n].value;
			matches++;
		}
	}
	listobj.length = matches;
	listobj.selectedIndex=0;
}

<Select size="4" name"ActionList" class="SelectAction" onChange="this.form.Action.value=this[this.selectedIndex].value;">
<option value="Calculations">Calculations</option>
<option value="Calculations Again">Calculations Again</option>
</select>
<input type="text" name="Action" class="inputAction">

Men jag vill samtidigt få in denna funktionen i Selectboxen

function bytavalue(obj){ 
	var ss = obj.pappa[obj.pappa.selectedIndex].value.split("&"); 
	obj.barn.length=ss.length
	for(var i=0; i<ss.length; i++){ 
		obj.barn[i].text=ss[i];
		obj.barn[i].value=ss[i];
	} 
} 

Denna aktiveras med 

onchange="this.form.realpappa.value=this[this.selectedIndex].text;bytavalue(this.form);">

Så I selecten vill jag få in

onchange="this.form.realpappa.value=this[this.selectedIndex].text;bytavalue(this.form);">

Samt

onChange="this.form.Person.value=this[this.selectedIndex].value;">

Det ser du i det första alternativet. Separera anropen med semikolon ";".

onchange="this.form.realpappa.value=this[this.selectedIndex].text; bytavalue(this.form); this.form.Person.value=this[this.selectedIndex].value">

Knappade ihop ett litet exempel, du får det också:

<script language="JavaScript" type="text/javascript">
function matchStart(t,obj){
	for(var i=0;i<obj.length;i++){
		obj[i].selected=(t==obj[i].text.substring(0,t.length));
	}
}
</script>
<form>
<select name="foo" onChange="matchStart(this[this.selectedIndex].text,this.form.bar);">
<option>--Välj--</option>
<option value="Mat">Mat</option>
<option value="Fordon">Fordon</option>
</select>

<select name="bar" size="8" multiple>
<option value="Mat1">Mat1</option>
<option value="Mat2">Mat2</option>
<option value="Mat3">Mat3</option>
<option value="Mat4">Mat4</option>
<option value="Fordon1">Fordon1</option>
<option value="Fordon2">Fordon2</option>
<option value="Fordon3">Fordon3</option>
<option value="Fordon4">Fordon4</option>
</select>
</form>

Ok men hur gör jag om jag vill ha 2 separata selectboxar?
Alltså

<option value="Mat">Mat</option>
<option value="Fordon">Fordon</option>
</select>

<select name="bar" size="8" multiple>
<option value="Mat1">Mat1</option>
<option value="Fordon1">Fordon1</option>
</select>

<select name="bar" size="8" multiple>
<option value="Mat1">Mat2</option>
<option value="Fordon1">Fordon2</option>
</select>

Båda kan ju inte ha Name="Bar"

När man markerar "Mat" så ska "Mat1" och "Mat2" markeras

Ett annat problem är också att dom inte alltid har liknande namn.
Det kan se ut såhär också

<option value="Mat">Mat</option>
<option value="Fordon">Fordon</option>
</select>

<select name="bar" size="8" multiple>
<option value="Hamburgare">Hamburgare</option>
<option value="Bil">Bil</option>
</select>

Hamburgare ska ju markeras när man markerat "Mat"

2 separata selectlistor är inget problem, men de bör inte ha samma namn.

<script language="JavaScript" type="text/javascript">
function matchStart(t,obj){
	for(var i=0;i<obj.length;i++){
		obj[i].selected=(t==obj[i].text.substring(0,t.length));
	}
}
</script>
<form>
<select name="foo" onChange="matchStart(this[this.selectedIndex].text,this.form.bar); matchStart(this[this.selectedIndex].text,this.form.smurf);">
<option>--Välj--</option>
<option value="Mat">Mat</option>
<option value="Fordon">Fordon</option>
<option value="Finns inte">Finns inte</option>
</select>

<select name="bar" size="8" multiple>
<option value="Mat1">Mat1</option>
<option value="Mat2">Mat2</option>
<option value="Mat3">Mat3</option>
<option value="Mat4">Mat4</option>
<option value="Fordon1">Fordon1</option>
<option value="Fordon2">Fordon2</option>
<option value="Fordon3">Fordon3</option>
<option value="Fordon4">Fordon4</option>
</select>

<select name="smurf" size="8" multiple>
<option value="Mat5">Mat5</option>
<option value="Mat6">Mat6</option>
<option value="Fordon5">Fordon5</option>
<option value="Fordon6">Fordon6</option>
</select>
</form>

Sedan kanske det inte är så självklart för en dator att hamburgare är mat :) Men du kan du låta alternativet heta "Mat, Hamburgare" på samma sätt som det heter "Mat2" i exemplet så fungerar det ju.

Ok, men kan den inte relatera genom "Value="""
Jag ska nämligen ha 6 st olika selectboxar som ska innehålla StartDatum, Slutdatum, Person, Prioritet, Händelse, AvklaratDatum. Så jag kan nog inte använda mig av liknande namn i själva selectboxen. Men om man kan relatera genom Value så kan ja ge dom samma value.

Visst, bara att ändra från text till value;

function matchStart(t,obj){
	for(var i=0;i<obj.length;i++){
		obj[i].selected=(t==obj[i].[b]value[/b].substring(0,t.length));
	}
}

och;

matchStart(this[this.selectedIndex].[b]value[/b],this.form.bar);

Ok perfekt!
En sista fråga.

Går det att göra så den matchar på Exakta namnet?
Just nu verkar den gå på följande Wildcard Mat%

Jag vill enbart markera dom som har exakt samma value.

obj[i].selected=(t==obj[i].value);

... men då kan du inte matcha Mat1, Mat2, Mat3 med "Mat" som du pratade om innan.