Traveling Salesman Traveling Salesman - 6 months ago 22
HTML Question

Filtering HTML select elements added by a java code as the user types in a textbox

I am using JSP with HTML.

In HTML, I have a textbox and a multiple select element. I would like to filter the options in the select list as the user types in the textbox.

I found a useful JQuery code on this stackoveflow page:
How to dynamic filter options of <select > with jQuery?

Here's the code:

<script>
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);

$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");

$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};

</script>


You could use it like this:

<script>
$(function() {
$('select').filterByText($('input'));
});
</script>


The problem is that this code only works when the options in the select element is hard coded.
By hard coded I mean like this:

<option value="something">something</option>
<option value="something">something</option>


However, in my case, I have a list of around 6000 values that I am adding to the select list using a java code. Here's that java code:

<%
ArrayList<String> allGenes= new ArrayList<String>();
allGenes.addAll(tree.getAllGenes());

%>

<%
for(int i=0; i<allGenes.size(); i++)
{ %>
var gene=document.createElement('option');
var str="<%=allGenes.get(i)%>";
gene.text= str;
try
{
document.getElementById("inputSet1").add(gene,null);
}
catch(ex){
document.getElementById("inputSet1").add(gene);
}
<%}%>


The JQuery code that filters the elements in the select list doesn't filter these values that i add using java code. Instead, it deletes all of them because these values are not hard coded.

Here's my textbox and my select element:

<input type="text" name="text" id="text" style="position: absolute; top: 50px; left: 55px; width: 200px; height: 22px; right: 4px">

<select id="inputSet1" multiple="multiple" Style="position: absolute; top: 93px; left: 55px; width: 200px; height: 200px; right: 4px; overflow-y: scroll">
<option value="1">1</option> </select>


Can anyone help me to make my code filters the values I add. Thank you.

Answer

It looks like the quick fix is to invoke filterByText after you have populated the option list.

<%
 ArrayList<String> allGenes= new ArrayList<String>();
   allGenes.addAll(tree.getAllGenes()); 

 %>

  <%
   for(int i=0; i<allGenes.size(); i++)
   { %>
   var gene=document.createElement('option');
   var str="<%=allGenes.get(i)%>";
   gene.text= str;
   try
    {
        document.getElementById("inputSet1").add(gene,null);
    }
     catch(ex){
              document.getElementById("inputSet1").add(gene);                             
     }
   <%}%>  
$('inputSet1').filterByText($('input'));

For the long term, I suggest you look into ajax. You would probably be better off passing data (in a format such as JSON) instead of writing java code that generates javascript code.

Comments