Javascript 过滤HTML选择用户在文本框中键入时由java代码添加的元素

我正在使用JSP和HTML

在HTML中，我有一个文本框和一个多选择元素。我想在用户在文本框中键入时过滤选择列表中的选项

我在这个stackoveflow页面上找到了一个有用的JQuery代码：

代码如下：

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

jQuery.fn.filterByText=函数（文本框）{
返回此值。每个（函数（）{
var选择=这个；
var期权=[]；
$（选择）.find（'option'）.each（函数（）{
push（{value:$（this.val（），text:$（this.text（）}）；
});
$（选择）.data（'options'，options）；
$（textbox）.bind（'change keyup'，function（）{
变量选项=$（选择）.empty（）.data（'options'）；
var search=$.trim（$（this.val（））；
var regex=新的RegExp（搜索，“gi”）；
$。每个（选项、功能（i）{
var期权=期权[i]；
if（option.text.match（regex）！==null）{
$（选择）。附加(
$（''）.text（option.text）.val（option.value）
);
}
});
});
});
};

您可以这样使用它：

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

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

$（函数（）{
$（'select'）.filterByText（$（'input'））；
});

问题是，此代码仅在select元素中的选项为硬编码时有效。 我所说的硬编码是指：

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

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

什么 某物 然而，在我的例子中，我有一个大约6000个值的列表，我正在使用java代码将其添加到选择列表中。下面是java代码：

<%
 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);                             
         }
       <%}%>         

我假设“硬编码”是指通过javascript动态添加值？我没有对此进行测试，但是如果jQuery插件在select填充之前被激活，它可能无法正常工作。。尝试确保在激活插件之前填充select

我假设“硬编码”是指通过javascript动态添加值？我没有对此进行测试，但是如果jQuery插件在select填充之前被激活，它可能无法正常工作。。尝试确保在激活插件之前填充select（选择）
快速修复方法似乎是在填充选项列表后调用filterByText

<%
 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'));


看起来快速修复方法是在填充选项列表后调用filterByText

<%
 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'));


不确定您是否希望查看jQueryUI，但它提供了一个自动完成小部件，其行为与您试图实现的非常相似

不确定您是否希望查看jQuery UI，但它提供了一个自动完成小部件，其行为与您试图完成的非常相似

在这把小提琴中，一切都运转良好：

我认为在jQuery工作时不能填充select

发布的jQuery必须在

 $(document).ready()

在这把小提琴中，一切都运转良好：

我认为在jQuery工作时不能填充select

发布的jQuery必须在

 $(document).ready()

你让我很开心。非常感谢。这很聪明，你让我很开心。非常感谢。这个很聪明。