filter the <select multiple> by textbox entries
Hai,
As the title tells, with this code:
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
Filter By Project<br>
<input type="text" name="project" size="10"/><br>
Filter By Tasks<br>
<input type="text" name="tasks" size="10"/>
</td>
<td width="75%">
<select name="projects_tasks" style="width:70%;" multiple>
<option value="1234 -- abcd"> 1234 -- abcd </option>
<option value="2124 -- sdf"> 2124 -- sdf </option>
<option value="314 -- sdfs"> 314 -- sdfs </option>
<option value="4634 -- twer"> 4634 -- twer </option>
<option value="6434 -- fgj"> 6434 -- fgj </option>
<option value="534 -- dfhd"> 534 -- dfhd </option>
<option value="856 -- rtrt"> 856 -- rtrt </option>
<option value="123 -- sggdf"> 123 -- sggdf </option>
<option value="4634 -- utzu"> 4634 -- utzu </option>
<option value="7345 -- fghfh"> 7345 -- fghfh </option>
<option value="9234 -- ozou"> 9234 -- ozou </option>
<option value="1234 -- hlh"> 1234 -- hlh </option>
<option value="534 -- qrqw"> 534 -- qrqw </option>
</select>
</td>
</tr>
</table>
</body>
</html>
How can i filter the select multiple options based on the entries in "projects" and/or "tasks" text field.
I explain one of my option so you can understand :
<option value="9234 -- ozou"> 9234 -- ozou </option>
9234 --> Project
ozou --> Task
How can i change the script as my requirement?
Thanks.
As the title tells, with this code:
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
Filter By Project<br>
<input type="text" name="project" size="10"/><br>
Filter By Tasks<br>
<input type="text" name="tasks" size="10"/>
</td>
<td width="75%">
<select name="projects_tasks" style="width:70%;" multiple>
<option value="1234 -- abcd"> 1234 -- abcd </option>
<option value="2124 -- sdf"> 2124 -- sdf </option>
<option value="314 -- sdfs"> 314 -- sdfs </option>
<option value="4634 -- twer"> 4634 -- twer </option>
<option value="6434 -- fgj"> 6434 -- fgj </option>
<option value="534 -- dfhd"> 534 -- dfhd </option>
<option value="856 -- rtrt"> 856 -- rtrt </option>
<option value="123 -- sggdf"> 123 -- sggdf </option>
<option value="4634 -- utzu"> 4634 -- utzu </option>
<option value="7345 -- fghfh"> 7345 -- fghfh </option>
<option value="9234 -- ozou"> 9234 -- ozou </option>
<option value="1234 -- hlh"> 1234 -- hlh </option>
<option value="534 -- qrqw"> 534 -- qrqw </option>
</select>
</td>
</tr>
</table>
</body>
</html>
How can i filter the select multiple options based on the entries in "projects" and/or "tasks" text field.
I explain one of my option so you can understand :
<option value="9234 -- ozou"> 9234 -- ozou </option>
9234 --> Project
ozou --> Task
How can i change the script as my requirement?
Thanks.
ASKER
nope! and i want it with something like "onkeyup" event in the textboxes.
then just change the code
<td>
Filter By Project<br>
<input type="text" name="project" size="10" onkeyup=filterSlt()><br>
Filter By Tasks<br>
<input type="text" name="tasks" size="10" onkeyup=filterSlt()>
<input type="button" value="filter" onclick="filterSlt()">
</td>
Regards
Riyasjef
<td>
Filter By Project<br>
<input type="text" name="project" size="10" onkeyup=filterSlt()><br>
Filter By Tasks<br>
<input type="text" name="tasks" size="10" onkeyup=filterSlt()>
<input type="button" value="filter" onclick="filterSlt()">
</td>
Regards
Riyasjef
ASKER
Nope! It doesn't works.. I am afraid i dont explain the question properly ?
The selction box options have to be filtered *dynamically* based on the input in the textboxes.
The selction box options have to be filtered *dynamically* based on the input in the textboxes.
Can u please explain *dynamically*.
Riyasjef
Riyasjef
ASKER
np ..i got it from here:
https://www.experts-exchange.com/questions/20231171/Filter-listbox-by-textbox.html
https://www.experts-exchange.com/questions/20231171/Filter-listbox-by-textbox.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
as always, thanks Zvonko.
:-)
:-)
You are welcome ;-)
Oh, one more note.
The <options> are not used in my upper version and can be removed without influencing the script.
But there is also a method to let the <option>s as is and remove the array. Then the array can be loaded in the init() function from the <options>.
Are you interested in that version?
The <options> are not used in my upper version and can be removed without influencing the script.
But there is also a method to let the <option>s as is and remove the array. Then the array can be loaded in the init() function from the <options>.
Are you interested in that version?
@Zvonko Nice
Thanks :)
Ok, only for completeness, here the <options> array loading:
<html>
<head>
<title>Projects</title>
<script>
var projTasks = new Array();
function selFilter(theFld){
theForm = theFld.form;
projVal = theForm.project.value;
taskVal = theForm.tasks.value;
opt = theForm.projects_tasks.opt
opt.length=0;
for(i=0;i<projTasks.length
if(projVal=="" || projTasks[i].indexOf(projV
if(taskVal=="" || projTasks[i].indexOf(" -- "+taskVal)>0){
opt[opt.length] = new Option(projTasks[i], projTasks[i]);
}
}
}
}
function init(){
opt = document.forms[0].projects
for(i=0;i<opt.length;i++){
projTasks[i] = opt[i].value;
}
projTasks.sort();
}
</script>
</head>
<body onLoad="init()">
<form>
<table border="1" width="100%">
<tr>
<td style="width:10%;">
Filter By Project
</td>
<td>
<input type="text" name="project" size="10" onKeyUp="selFilter(this)"/
</td>
<td width="75%" rowspan="2">
<select name="projects_tasks" style="width:70%;" multiple>
<option value="1234 -- abcd"> 1234 -- abcd </option>
<option value="2124 -- sdf"> 2124 -- sdf </option>
<option value="314 -- sdfs"> 314 -- sdfs </option>
<option value="4634 -- twer"> 4634 -- twer </option>
<option value="6434 -- fgj"> 6434 -- fgj </option>
<option value="534 -- dfhd"> 534 -- dfhd </option>
<option value="856 -- rtrt"> 856 -- rtrt </option>
<option value="123 -- sggdf"> 123 -- sggdf </option>
<option value="4634 -- utzu"> 4634 -- utzu </option>
<option value="7345 -- fghfh"> 7345 -- fghfh </option>
<option value="9234 -- ozou"> 9234 -- ozou </option>
<option value="1234 -- hlh"> 1234 -- hlh </option>
<option value="534 -- qrqw"> 534 -- qrqw </option>
</select>
</td>
</tr>
<tr>
<td style="width:10%;">
Filter By Tasks
</td>
<td>
<input type="text" name="tasks" size="10" onKeyUp="selFilter(this)"/
</td>
</tr>
</table>
</form>
</body>
</html>
Ok, only for completeness, here the <options> array loading:
<html>
<head>
<title>Projects</title>
<script>
var projTasks = new Array();
function selFilter(theFld){
theForm = theFld.form;
projVal = theForm.project.value;
taskVal = theForm.tasks.value;
opt = theForm.projects_tasks.opt
opt.length=0;
for(i=0;i<projTasks.length
if(projVal=="" || projTasks[i].indexOf(projV
if(taskVal=="" || projTasks[i].indexOf(" -- "+taskVal)>0){
opt[opt.length] = new Option(projTasks[i], projTasks[i]);
}
}
}
}
function init(){
opt = document.forms[0].projects
for(i=0;i<opt.length;i++){
projTasks[i] = opt[i].value;
}
projTasks.sort();
}
</script>
</head>
<body onLoad="init()">
<form>
<table border="1" width="100%">
<tr>
<td style="width:10%;">
Filter By Project
</td>
<td>
<input type="text" name="project" size="10" onKeyUp="selFilter(this)"/
</td>
<td width="75%" rowspan="2">
<select name="projects_tasks" style="width:70%;" multiple>
<option value="1234 -- abcd"> 1234 -- abcd </option>
<option value="2124 -- sdf"> 2124 -- sdf </option>
<option value="314 -- sdfs"> 314 -- sdfs </option>
<option value="4634 -- twer"> 4634 -- twer </option>
<option value="6434 -- fgj"> 6434 -- fgj </option>
<option value="534 -- dfhd"> 534 -- dfhd </option>
<option value="856 -- rtrt"> 856 -- rtrt </option>
<option value="123 -- sggdf"> 123 -- sggdf </option>
<option value="4634 -- utzu"> 4634 -- utzu </option>
<option value="7345 -- fghfh"> 7345 -- fghfh </option>
<option value="9234 -- ozou"> 9234 -- ozou </option>
<option value="1234 -- hlh"> 1234 -- hlh </option>
<option value="534 -- qrqw"> 534 -- qrqw </option>
</select>
</td>
</tr>
<tr>
<td style="width:10%;">
Filter By Tasks
</td>
<td>
<input type="text" name="tasks" size="10" onKeyUp="selFilter(this)"/
</td>
</tr>
</table>
</form>
</body>
</html>
ASKER
:-) wonderful, many thanks. :-)
<html>
<head>
<title>Untitled</title>
<script>
function filterSlt()
{
document.getElementById("p
}
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
Filter By Project<br>
<input type="text" name="project" size="10"/><br>
Filter By Tasks<br>
<input type="text" name="tasks" size="10"/>
<input type="button" value="filter" onclick="filterSlt()">
</td>
<td width="75%">
<select name="projects_tasks" style="width:70%;" multiple>
<option value="1234 -- abcd"> 1234 -- abcd </option>
<option value="2124 -- sdf"> 2124 -- sdf </option>
<option value="314 -- sdfs"> 314 -- sdfs </option>
<option value="4634 -- twer"> 4634 -- twer </option>
<option value="6434 -- fgj"> 6434 -- fgj </option>
<option value="534 -- dfhd"> 534 -- dfhd </option>
<option value="856 -- rtrt"> 856 -- rtrt </option>
<option value="123 -- sggdf"> 123 -- sggdf </option>
<option value="4634 -- utzu"> 4634 -- utzu </option>
<option value="7345 -- fghfh"> 7345 -- fghfh </option>
<option value="9234 -- ozou"> 9234 -- ozou </option>
<option value="1234 -- hlh"> 1234 -- hlh </option>
<option value="534 -- qrqw"> 534 -- qrqw </option>
</select>
</td>
</tr>
</table>
</body>
</html>