webForumDet fria alternativet

Sökord med javascript?

31 svar · 673 visningar · startad av Jesper T

Jesper TMedlem sedan nov. 20017 058 inlägg
#1

Undrar om det går att skapa en liknande funktion som finns i hjälpen i windows. När man skriver in sökordet så skall samtliga poster som börjar med begynnelsebokstäverna i sökordet poppa upp i nedre rutan(precis som på hjälpen).

Är det någon som har någon idé, eller tankar runt detta?

colioneMedlem sedan juni 20013 386 inlägg
#2

Antar att det är en sådan här du söker:
http://yrken.ams.se/ (låt sidan ladda färdigt först i menyn till vänster finns det du söker)

Jesper TMedlem sedan nov. 20017 058 inlägg
#3

Exaktamente, exakt vad jag sökte.
Jag skall kolla lite på´t!
Återkommer kanske.

JojoxxMedlem sedan juni 20004 306 inlägg
#4

Finns även med förklaring här, med aningen mindre kod :) Har även lite intelligens och sorterar bort de poster som inte stämmer medans man skriver.

Jesper TMedlem sedan nov. 20017 058 inlägg
#5

1.) Ok, såg i det första exemplet att dom kruxat lite med v,w samt å, ä och ö, är inte det av intresse i en sådan kod?

2.) Hur lägger man in en submit på vald sak i listmenyn?

3.) Är det lång laddningstid på en sida om en sådan listmeny har ca. två tusen(2000) <select>sak</select>grejjor?

JojoxxMedlem sedan juni 20004 306 inlägg
#6

  1. Visst kan man göra något sådant. Jag kan inte se någon användning i att blanda ihop å,ä och ö i en normal applikation, möjligtvis v och w för den som inte vet hur något stavas. Men det är ju frågan vad datat skall användas till och ifall applikationen som tar emot datat accepterar att man blandar ihop v och w. En artikeldatabas med artikelnummer "1w234" och "1v234" är ett exempel på där man inte bör blanda och ge med bokstäver. :)

  2. Lägg till <input type="submit" value="skicka"> :) Vald sak i listan kommer att skickas som vanligt. Även text-fältet skickas, så det är bara att välja vilket data du vill använda sen ("search" eller "lista").

  3. Mellan 15-20 sek teoretiskt på ett modem. Men det är ju oavsett hur du väljer att lösa det. Skall du sköta det i webbläsaren måste ju datat dit. Men med 2000 poster i en selectlista kanske man bör fundera på om man kan dela upp datat på något smartare sätt.

Red) Har lagt till en inställning "ignorevw" ifall man vill behandla v och w som samma tecken.

Red 2) Felstavning

Jesper TMedlem sedan nov. 20017 058 inlägg
#7

  1. Tack!

  2. Jag var kanske lite flummig i min beskrivning, jag menar inte en submitknapp, utan när du tex dubbelklickar i listfältet.

  3. Ok, har du några förslag? Om jag lägger in olika poster i kategorier(javascript), så måste väl allt ändå "laddas upp" till browsern?! Eventuellt så går det att koppla kategorierna med databashämtningar för att hämta posterna, men spar man någon uppladdningstid på det igentligen?
    Skulle det på något sätt vara smidigare att lägga posterna i en array som i detta exempel för att få det att gå fortare?
    http://www.webforum.nu/showthread.php?s=&postid=334253#post334253

colioneMedlem sedan juni 20013 386 inlägg
#8

2

<select onDblClick="klickad();">

function klickad()
{
document.dinForm.dittFormelement.submit();
}
Jesper TMedlem sedan nov. 20017 058 inlägg
#9

Nu har jag gjort en liten kombination av både jojoxx sökvariant och en annan, men det strular. Det går inte riktigt som jag tänkt.
Dels så kommer siffran i upp i stället för matvaran när man klickar på en post och dels så blir det tomt om jag tex söker på ost i stället för Ost


<HTML>
<HEAD>
<TITLE>Popuplate Listbox with Javascript and ASP</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
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) {
			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>
<SCRIPT language="JavaScript">
function boxData(sText, vValue){
	this.text = sText;
	this.value = vValue;
}

var link1 = new Array();
link1[0] = new boxData("Banan",3);
link1[1] = new boxData("Körsbär",4);
link1[2] = new boxData("Päron",2);
link1[3] = new boxData("Äpple",1);

var link2 = new Array();
link2[0] = new boxData("Lamm",6);
link2[1] = new boxData("Lax",7);
link2[2] = new boxData("Stek",5);

var link3 = new Array();
link3[0] = new boxData("Gädde",9);
link3[1] = new boxData("Mjölk",8);
link3[2] = new boxData("Ost",10);
link3[3] = new boxData("Ägg",11);

var link4 = new Array();
link4[0] = new boxData("Durumvete",14);
link4[1] = new boxData("Grahamsmjöl",15);
link4[2] = new boxData("Spagetti",13);
link4[3] = new boxData("Vetemjöl",12);

function populateBox(obj, icase, arr){
	// alert(icase);
	var vgr = eval (arr);
	if (vgr.length > 0){
		obj.length = (vgr.length + 1);
		obj.options[0].value = '';
		obj.options[0].text = 'Select subcategory';
		for(n=0;n<vgr.length;n++){
			obj.options[n+1].value = vgr[n].value;
			obj.options[n+1].text = vgr[n].text;
		}
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			obj.options[n].value = 0;
			obj.options[n].text = 'N/A';
		}
	}
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="">

  <SELECT name="select" onChange="populateBox(document.form1.lista,this.options.length,value);">
		<OPTION value="0">Select Category</OPTION>

		<OPTION value="link1">Frukter & Grönt</OPTION>

		<OPTION value="link2">Kött & Fisk</OPTION>

		<OPTION value="link3">Mjölk & Ägg</OPTION>

		<OPTION value="link4">Pasta & Mjöl</OPTION>

</SELECT>
<input type="text" name="search" onKeyUp="searchlist(this.value,this.form.lista);" onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;">
<select name="lista" size="3" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">

  <OPTION>N/A</OPTION>
  </SELECT>

</FORM>
</BODY>
</HTML>
colioneMedlem sedan juni 20013 386 inlägg
#10

Eftersom JavaScript Skiljer på gemener och versaler så måste du göra om båda värdena (det du söker på och det i listan) till antingen små eller stora bokstäver, här gör jag dem till små med: . toLowerCase() Det andra beror på att du anropar värdet av arrayen (numret), inte texten. Det löser du genom att ändra i funktionen pupulateBox. Där måste du även ändra valuet på om det står na i selcten fråmn noll till inget..

<HTML>
<HEAD>
<TITLE>Popuplate Listbox with Javascript and ASP</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
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)[b][red].toLowerCase()[/b][/red] == value[b][red].toLowerCase()[/b][/red]) {
			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>
<SCRIPT language="JavaScript">
function boxData(sText, vValue){
	this.text = sText;
	this.value = vValue;
}

var link1 = new Array();
link1[0] = new boxData("Banan",3);
link1[1] = new boxData("Körsbär",4);
link1[2] = new boxData("Päron",2);
link1[3] = new boxData("Äpple",1);

var link2 = new Array();
link2[0] = new boxData("Lamm",6);
link2[1] = new boxData("Lax",7);
link2[2] = new boxData("Stek",5);

var link3 = new Array();
link3[0] = new boxData("Gädde",9);
link3[1] = new boxData("Mjölk",8);
link3[2] = new boxData("Ost",10);
link3[3] = new boxData("Ägg",11);

var link4 = new Array();
link4[0] = new boxData("Durumvete",14);
link4[1] = new boxData("Grahamsmjöl",15);
link4[2] = new boxData("Spagetti",13);
link4[3] = new boxData("Vetemjöl",12);

function populateBox(obj, icase, arr){
	// alert(icase);
	var vgr = eval (arr);
	if (vgr.length > 0){
		obj.length = (vgr.length + 1);
		obj.options[0].value = '';
		obj.options[0].text = 'Select subcategory';
		for(n=0;n<vgr.length;n++){
			obj.options[n+1].value = vgr[n][b][red].text[/b][/red];
			obj.options[n+1].text = vgr[n].text;
		}
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			[b][red]obj.options[n].value = ;[/b][/red]
			obj.options[n].text = 'N/A';
		}
	}
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="">

  <SELECT name="select" onChange="populateBox(document.form1.lista,this.options.length,value);">
		<OPTION value="0">Select Category</OPTION>

		<OPTION value="link1">Frukter & Grönt</OPTION>

		<OPTION value="link2">Kött & Fisk</OPTION>

		<OPTION value="link3">Mjölk & Ägg</OPTION>

		<OPTION value="link4">Pasta & Mjöl</OPTION>

</SELECT>
<input type="text" name="search" onKeyUp="searchlist(this.value,this.form.lista);" 

onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;">
<select name="lista" size="3" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">

  <OPTION>N/A</OPTION>
  </SELECT>

</FORM>
</BODY>
</HTML>
Jesper TMedlem sedan nov. 20017 058 inlägg
#11

Tack, men jag får syntax error på rad 79
Denna: obj.options[n].value = ;

colioneMedlem sedan juni 20013 386 inlägg
#12

Fel av mej ändra till:

obj.options[n].value = '';
Jesper TMedlem sedan nov. 20017 058 inlägg
#13

Tack, jag kom på det själv :)
Men det är ändå en liten "bugg":
Om man skrivit något i sökfältet, ändrar kategori, markerar upp i sökfältet igen och skriver ett sökord så blir listan tom. Vad kan det bero på?

colioneMedlem sedan juni 20013 386 inlägg
#14

Jag har inte tid att lösa det nu men som det ser ut så byter du inte array som den söker i utan byter bara värdet i selectboxen, därför söker den fortfarande på det gamla värdet. Jag återkomemr imorgon (antagligen) med en lösning om inte någon hinner före...

JojoxxMedlem sedan juni 20004 306 inlägg
#15

Listan måste byggas om varje gång man bytt kategori för att sökningen skall fungera. Det gör du genom att anropa funktionen buildlist. Sen kanske det är snyggast att rensa sök-fältet när man byter kategori.

<HTML>
<HEAD>
<TITLE>Popuplate Listbox with Javascript and ASP</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
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).toLowerCase() == value.toLowerCase()) {
			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>
<SCRIPT language="JavaScript">
function boxData(sText, vValue){
	this.text = sText;
	this.value = vValue;
}

var link1 = new Array();
link1[0] = new boxData("Banan",3);
link1[1] = new boxData("Körsbär",4);
link1[2] = new boxData("Päron",2);
link1[3] = new boxData("Äpple",1);

var link2 = new Array();
link2[0] = new boxData("Lamm",6);
link2[1] = new boxData("Lax",7);
link2[2] = new boxData("Stek",5);

var link3 = new Array();
link3[0] = new boxData("Gädde",9);
link3[1] = new boxData("Mjölk",8);
link3[2] = new boxData("Ost",10);
link3[3] = new boxData("Ägg",11);

var link4 = new Array();
link4[0] = new boxData("Durumvete",14);
link4[1] = new boxData("Grahamsmjöl",15);
link4[2] = new boxData("Spagetti",13);
link4[3] = new boxData("Vetemjöl",12);

function populateBox(obj, icase, arr){
	// alert(icase);
	var vgr = eval (arr);
	if (vgr.length > 0){
		obj.length = (vgr.length + 1);
		obj.options[0].value = '';
		obj.options[0].text = 'Select subcategory';
		for(n=0;n<vgr.length;n++){
			obj.options[n+1].value = vgr[n].text;
			obj.options[n+1].text = vgr[n].text;
		}
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			obj.options[n].value = '';
			obj.options[n].text = 'N/A';
		}
	}
	buildlist(obj);
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="">

  <SELECT name="select" onChange="populateBox(document.form1.lista,this.options.length,value); this.form.search.value='';">
		<OPTION value="0">Select Category</OPTION>

		<OPTION value="link1">Frukter & Grönt</OPTION>

		<OPTION value="link2">Kött & Fisk</OPTION>

		<OPTION value="link3">Mjölk & Ägg</OPTION>

		<OPTION value="link4">Pasta & Mjöl</OPTION>

</SELECT>
<input type="text" name="search" onKeyUp="searchlist(this.value,this.form.lista);" 

onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;">
<select name="lista" size="3" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">

  <OPTION>N/A</OPTION>
  </SELECT>

</FORM>
</BODY>
</HTML>
Jesper TMedlem sedan nov. 20017 058 inlägg
#16

Tack för all hjälp!
Två små bonusfrågor kommer här:

1.) Är detta bästa(mest laddningstidseffektivaste) sättet att göra på eller vad tror ni? (Alla poster ligger i en access-databas)
Eller är det bättre att varje "ändring" i kategoriselecten hämtar upp respektive poster ur databasen?
2.) Går det att lägga till ett hiddenfält med "siffran" för varje post? (Jag behöver den för senare submit till databasen)

Jesper TMedlem sedan nov. 20017 058 inlägg
#17

?

JojoxxMedlem sedan juni 20004 306 inlägg
#18

Sattle down, waz on fire bro'?!?! ;)

  1. Vet inte hur mycket data det är, men rör det sig om 2000 produkter skulle jag nog överväga att lägga det i underkategorier som visas en och en.

  2. Du hade produktnummer från början som värde i listan, vet inte varför det blev utbytt.

Så här;

<HTML>
<HEAD>
<TITLE>Popuplate Listbox with Javascript and ASP</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
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).toLowerCase() == value.toLowerCase()) {
			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>
<SCRIPT language="JavaScript">
function boxData(sText, vValue){
	this.text = sText;
	this.value = vValue;
}

var link1 = new Array();
link1[0] = new boxData("Banan",3);
link1[1] = new boxData("Körsbär",4);
link1[2] = new boxData("Päron",2);
link1[3] = new boxData("Äpple",1);

var link2 = new Array();
link2[0] = new boxData("Lamm",6);
link2[1] = new boxData("Lax",7);
link2[2] = new boxData("Stek",5);

var link3 = new Array();
link3[0] = new boxData("Gädde",9);
link3[1] = new boxData("Mjölk",8);
link3[2] = new boxData("Ost",10);
link3[3] = new boxData("Ägg",11);

var link4 = new Array();
link4[0] = new boxData("Durumvete",14);
link4[1] = new boxData("Grahamsmjöl",15);
link4[2] = new boxData("Spagetti",13);
link4[3] = new boxData("Vetemjöl",12);

function populateBox(obj, icase, arr){
	// alert(icase);
	var vgr = eval (arr);
	if (vgr.length > 0){
		obj.length = (vgr.length + 1);
		obj.options[0].value = '';
		obj.options[0].text = 'Select subcategory';
		for(n=0;n<vgr.length;n++){
			obj.options[n+1].value = vgr[n].value;
			obj.options[n+1].text = vgr[n].text;
		}
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			obj.options[n].value = '';
			obj.options[n].text = 'N/A';
		}
	}
	buildlist(obj);
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="">

  <SELECT name="select" onChange="populateBox(document.form1.lista,this.options.length,value); this.form.search.value='';">
		<OPTION value="0">Select Category</OPTION>

		<OPTION value="link1">Frukter & Grönt</OPTION>

		<OPTION value="link2">Kött & Fisk</OPTION>

		<OPTION value="link3">Mjölk & Ägg</OPTION>

		<OPTION value="link4">Pasta & Mjöl</OPTION>

</SELECT>
<input type="text" name="search" onKeyUp="searchlist(this.value,this.form.lista);" 

onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;">
<select name="lista" size="3" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">

  <OPTION>N/A</OPTION>
  </SELECT>

</FORM>
</BODY>
</HTML>
Jesper TMedlem sedan nov. 20017 058 inlägg
#19

Ok, men jag vill ha båda värdena, siffran i ett hiddenfält och texten i searchfältet.

Går det att disabla searchfältet när ingen kategori är vald?
typ:

....
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			obj.options[n].value = '';
			obj.options[n].text = 'Välj kategori';
			}
		[b]document.form1.Search.disabled = true;[/b]
	}
	buildlist(obj);
}
....
JojoxxMedlem sedan juni 20004 306 inlägg
#20

Nästa version av scriptet skall flyga till månen va? ;)

<HTML>
<HEAD>
<TITLE>Popuplate Listbox with Javascript and ASP</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
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).toLowerCase() == value.toLowerCase()) {
			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>
<SCRIPT language="JavaScript">
function boxData(sText, vValue){
	this.text = sText;
	this.value = vValue;
}

var link1 = new Array();
link1[0] = new boxData("Banan",3);
link1[1] = new boxData("Körsbär",4);
link1[2] = new boxData("Päron",2);
link1[3] = new boxData("Äpple",1);

var link2 = new Array();
link2[0] = new boxData("Lamm",6);
link2[1] = new boxData("Lax",7);
link2[2] = new boxData("Stek",5);

var link3 = new Array();
link3[0] = new boxData("Gädde",9);
link3[1] = new boxData("Mjölk",8);
link3[2] = new boxData("Ost",10);
link3[3] = new boxData("Ägg",11);

var link4 = new Array();
link4[0] = new boxData("Durumvete",14);
link4[1] = new boxData("Grahamsmjöl",15);
link4[2] = new boxData("Spagetti",13);
link4[3] = new boxData("Vetemjöl",12);

function populateBox(obj, icase, arr){
	// alert(icase);
	var vgr = eval (arr);
	if (vgr.length > 0){
		obj.length = (vgr.length + 1);
		obj.options[0].value = '';
		obj.options[0].text = 'Select subcategory';
		for(n=0;n<vgr.length;n++){
			obj.options[n+1].value = vgr[n].value;
			obj.options[n+1].text = vgr[n].text;
		}
	}else{
		obj.length = 1;
		for(n=0;n<obj.length;n++){
			obj.options[n].value = '';
			obj.options[n].text = 'N/A';
		}
	}
	buildlist(obj);
	document.form1.search.disabled=(document.form1.select.selectedIndex==0);
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<FORM name="form1" method="post" action="" onSubmit="if(this.lista.selectedIndex>-1){ this.lameTextField.value=this.lista[this.lista.selectedIndex].text; } return true;">

  <SELECT name="select" onChange="populateBox(document.form1.lista,this.options.length,value); this.form.search.value='';">
		<OPTION value="0">Select Category</OPTION>

		<OPTION value="link1">Frukter & Grönt</OPTION>

		<OPTION value="link2">Kött & Fisk</OPTION>

		<OPTION value="link3">Mjölk & Ägg</OPTION>

		<OPTION value="link4">Pasta & Mjöl</OPTION>

</SELECT>
<input type="text" name="search" disabled onKeyUp="searchlist(this.value,this.form.lista);" 

onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;">
<select name="lista" size="3" onChange="this.form.search.value=this[this.selectedIndex].text;" style="width: 150px;">

  <OPTION>N/A</OPTION>
  </SELECT>

<input type="hidden" name="lameTextField">
</FORM>
</BODY>
</HTML>

Numret finns i "lista", texten finns i "lameTextField".

Genererad på 382 ms · cache AV · v20260730165559-full.f96bc7eb