Solved

filter the <select multiple> by textbox entries

Posted on 2004-09-23
13
357 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 63

Accepted Solution

by:
Zvonko earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript create file issue 4 45
Regular Expression 1-100 with two digits 15 21
jQuery not working on ELSE... why? 2 19
using php variable inside javascript 5 11
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…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now