?
Solved

filter the <select multiple> by textbox entries

Posted on 2004-09-23
13
Medium Priority
?
363 Views
Last Modified: 2008-02-26
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.
0
Comment
Question by:ldbkutty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 4
13 Comments
 
LVL 9

Expert Comment

by:riyasjef
ID: 12132373
try this

<html>
<head>
     <title>Untitled</title>
     <script>
           function filterSlt()
           {
                  document.getElementById("projects_tasks").options.value=document.getElementById("project").value+' -- '+document.getElementById("tasks").value;
           }
     </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>

0
 
LVL 32

Author Comment

by:ldbkutty
ID: 12132411
nope! and i want it with something like "onkeyup" event in the textboxes.
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12132447
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Author Comment

by:ldbkutty
ID: 12132606
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.
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12132645
Can u please explain *dynamically*.

Riyasjef
0
 
LVL 32

Author Comment

by:ldbkutty
ID: 12132808
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 12132882
Here my version:

<html>
<head>
     <title>Projects</title>
<script>
var projTasks = [
"1234 -- abcd",
"2124 -- sdf",
"314 -- sdfs",
"4634 -- twer",
"6434 -- fgj",
"534 -- dfhd",
"856 -- rtrt",
"123 -- sggdf",
"4634 -- utzu",
"7345 -- fghfh",
"9234 -- ozou",
"1234 -- hlh",
"534 -- qrqw"];
projTasks.sort();
function selFilter(theFld){
  theForm = theFld.form;
  projVal = theForm.project.value;
  taskVal = theForm.tasks.value;
  opt = theForm.projects_tasks.options;
  opt.length=0;
  for(i=0;i<projTasks.length;i++){
    if(projVal=="" || projTasks[i].indexOf(projVal)==0){
      if(taskVal=="" || projTasks[i].indexOf(" -- "+taskVal)>0){
        opt[opt.length] = new Option(projTasks[i], projTasks[i]);
      }
    }
  }
}

function init(){
  document.forms[0].project.onkeyup();
}

</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>


0
 
LVL 32

Author Comment

by:ldbkutty
ID: 12132893
as always, thanks Zvonko.

:-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12132930
You are welcome ;-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12132981
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?

0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12133052
@Zvonko Nice
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12133085
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.options;
  opt.length=0;
  for(i=0;i<projTasks.length;i++){
    if(projVal=="" || projTasks[i].indexOf(projVal)==0){
      if(taskVal=="" || projTasks[i].indexOf(" -- "+taskVal)>0){
        opt[opt.length] = new Option(projTasks[i], projTasks[i]);
      }
    }
  }
}

function init(){
  opt = document.forms[0].projects_tasks.options;
  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>

0
 
LVL 32

Author Comment

by:ldbkutty
ID: 12136757
:-) wonderful, many thanks. :-)
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question