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>

問題は、select 要素のオプションがハードコードされている場合にのみ、このコードが機能することです。ハードコーディングとは、次のような意味です。

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

ただし、私の場合、Java コードを使用して選択リストに追加する約 6000 の値のリストがあります。その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 を検討することをお勧めします。おそらく、JavaScript コードを生成する Java コードを作成するよりも、(JSON などの形式で) データを渡すほうがよいでしょう。

于 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

このフィドルでは、すべてが正常に機能しています：http: //jsfiddle.net/peFDk/

jQueryの作業時には、selectを設定できないと思います。

投稿するjQueryはで実行する必要があります

 $(document).ready()
于 2012-12-20T20:25:46.800 に答える
0

jQuery UI を調べたいかどうかはわかりませんが、達成しようとしているものと非常によく似た動作をするオートコンプリート ウィジェットを提供します。

http://jqueryui.com/autocomplete/

于 2012-12-20T20:22:46.147 に答える