Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

filter the <select multiple> by textbox entries

Posted on 2004-09-23
13
Medium Priority
?
366 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
Technology Partners: 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

604 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