Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 368
  • Last Modified:

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.
0
ldbkutty
Asked:
ldbkutty
  • 5
  • 4
  • 4
1 Solution
 
riyasjefCommented:
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
 
ldbkuttyAuthor Commented:
nope! and i want it with something like "onkeyup" event in the textboxes.
0
 
riyasjefCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ldbkuttyAuthor Commented:
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
 
riyasjefCommented:
Can u please explain *dynamically*.

Riyasjef
0
 
ldbkuttyAuthor Commented:
0
 
ZvonkoSystems architectCommented:
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
 
ldbkuttyAuthor Commented:
as always, thanks Zvonko.

:-)
0
 
ZvonkoSystems architectCommented:
You are welcome ;-)
0
 
ZvonkoSystems architectCommented:
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
 
riyasjefCommented:
@Zvonko Nice
0
 
ZvonkoSystems architectCommented:
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
 
ldbkuttyAuthor Commented:
:-) wonderful, many thanks. :-)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 5
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now