PDA

View Full Version : How can I modify a 'list chooser' script for my own options?



seedsaver
Jul 20th, 2005, 12:44 PM
I have a form (HTML/PHP) with an options menu of about 70 items. It would be super to use a list chooser to jump to the correct place and save endless scrolling. I have copied a couple of complete 'list chooser' scripts from JavaScript sites, but they use "type=text" and list options in the <body>. I need to fit this to my "select" and WHILE...($row=mysql_fetch_array($query1)) code. Can anybody help?

Kor
Jul 20th, 2005, 01:30 PM
I have found into my archive of test works something very much similar, except that the code will do more than you say you neeed, it will remove the options which do not have the typed characters, till it remains only the desired.

For instance, in my example, if you type first time "a", all the options which have not "a" as first letter are removed. Further, if type "b" as second letter, will remain only the options which began with "ab"... and so on... I don't know if you want so much, but I hope it will help you somehow:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var str='';//initialize the string pressed
function sel(e,s){
var pkey=(typeof event!='undefined')?String.fromCharCode(window.event.keyCode):String.fromCharCode(e.keyCode);//returns crossbrowser the pressed key
var re = /^[A-z-' ']*$/;
if(re.test(pkey)){//do the job only if pressed key is a letter
str=str+pkey.toLowerCase()//string pressed
var lim=s.options.length;
for(var i=1;i<lim;i++){
if(s.options[i].text.toLowerCase().indexOf(str)!=0){//if string pressed is not at the begining
s.removeChild(s.options[i]);lim--;i--;//remove the option
}
if(lim>1){//if there is more than 1 option (start option)
s.options[1].selected=true;//focus on the first needed option
}
}
}

}
</script>
</head>
<body>
<select onkeyup="sel(event,this)">
<option selected>--select--</option>
<option>aaa</option>
<option>aba</option>
<option>abc</option>
<option>bbb</option>
<option>bcb</option>
<option>bcd</option>
</select>
</div>
</body>
</html>

Johnny Lang
Jul 20th, 2005, 01:38 PM
To make it simple, I deleted my code.

Kor
Jul 20th, 2005, 01:42 PM
Nice code (even a little bit too long). Except that I don't think is a good ideea to build dynamically the options. I guess that users which might have javascript disabled deserve a chance to see the options and select them manually.... :)

seedsaver
Jul 20th, 2005, 05:17 PM
Thanks both of you for replying - but either I don't get it/can't find it :( , or you haven't specified part of the answer: I can't list the options in my script, but have to get them dynamically from the table - all 70 (?) of them. If you know the answer to this, could you please specify where the <?php WHILE...echo options?> and HTML form select tags fit into the JavaScript? That must be possible. Can I just shove it in where you have "allOptions" or "aba", etc.? Could one of you please write that part of the code?
The answer may be simple, but I have no experience with JavaScript and not much with php, so I need simple answers!