0

我正在使用带有 HTML 的 JSP。

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

我在这个 stackoveflow 页面上找到了一个有用的 JQuery 代码： How to dynamic filter options of <select > with 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>

你可以像这样使用它：

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

过滤选择列表中元素的 JQuery 代码不会过滤我使用 java 代码添加的这些值。相反，它会删除所有这些值，因为这些值不是硬编码的。

这是我的文本框和我的选择元素：

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

谁能帮我让我的代码过滤我添加的值。谢谢你。

4

4 回答 4

3

看起来快速修复是在填充选项列表后调用 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'));

从长远来看，我建议您研究 ajax。您最好传递数据（以 JSON 等格式）而不是编写生成 javascript 代码的 java 代码。

于 2012-12-20T20:22:37.490 回答
1 
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.

我假设“硬编码”是指这些值是由 javascript 动态添加的？我没有对此进行测试，但是如果在填充选择之前激活了 jQuery 插件，它可能无法正常运行。尝试确保在激活插件之前填充选择

于 2012-12-20T20:21:34.307 回答
0

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

http://jqueryui.com/autocomplete/

于 2012-12-20T20:22:46.147 回答
0

在这个小提琴中一切正常：http: //jsfiddle.net/peFDk/

我认为在 jQuery 工作时不能填充选择。

您发布的 jQuery 必须在

 $(document).ready()
于 2012-12-20T20:25:46.800 回答