Solved

filter the <select multiple> by textbox entries

Posted on 2004-09-23
13
360 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open dialog with server side controls in it 3 48
Glitching Slide Show 19 28
What is the correct way to check for empty value in input field 2 20
AngularJS: ng-repeat 25 28
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

730 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