3

次のマークアップがあります。

<input type="text" id="comboBox" />
<ul id="comboBoxData">
    <li>1</li>
    <li>12</li>
    <li>123</li>
    <li>1234</li>
    <li>12345</li>
    <li>123456</li>
    <li>1234567</li>
    <li>12345678</li>
</ul>

次の JQuery コードを使用します。

$(document).ready(function() {   
    $('#comboBox').bind('keydown keypress keyup change', function () {
        var search = $('#comboBox').val();
        if (search !== '') {
            $('#comboBoxData li').hide();
            $('#comboBoxData li[text*=' + search + ']').show();
        } else {
            $('#comboBoxData li').show();
        }
    });
});

「コンボボックス」検索フィールドに「1」や「12」などのテキストを入力すると、テキストに検索データが含まれていないすべての LI が除外されるはずですが、何らかの理由で代わりに何も表示されません。なんで？

4

4 に答える 4

7

テキストは の属性ではないため、この例は機能しませんli。

filter()代わりにテキストの検索に使用してみてください:

$('#comboBox').bind('keydown keypress keyup change', function() {
    var search = this.value;
    var $li = $("#comboBoxData li").hide();
    $li.filter(function() {
        return $(this).text().indexOf(search) >= 0;
    }).show();
});

フィドルの例

于 2012-05-21T13:21:17.827 に答える
0

チェックボックスの値を含む要素を見つけるには、各要素をループし、.text() 関数を使用してタグのテキスト コンテンツを取得する必要があります。

$('#comboBoxData li').each(function() {
    if ($(this).text().indexOf(search) != -1) {
        $(this).show();
    }
});
于 2012-05-21T13:25:57.207 に答える
0 
 $(document).ready(function () {
        $("#comboBoxData li").hide();

        $('#comboBoxData li').each(function (i) {
            $(this).attr('data-text', function () {
                return $(this).text();
            });
        });

        $('#comboBox').bind('change keypress  keyup change', function () {
            $("#comboBoxData li").hide();
            $('#comboBoxData li[data-text*="' + $.trim($(this).val()) + '"]').show();
        });
    });​

ライブ デモについては、次のリンクを参照してください: http://jsfiddle.net/nanoquantumtech/B7NxP/

于 2012-05-21T13:37:23.973 に答える
0

textのプロパティはありませんli。text()プロパティを挿入できます。
の代わりに:

$('#comboBoxData li').hide();
$('#comboBoxData li[text*=' + search + ']').show();

試す

$('#comboBoxData li').each(function(){
   if ( ($this).text().indexOf(search) > -1 ) $(this).show(); 
   else $(this).hide();
});
于 2012-05-21T13:22:31.880 に答える