0

これは非常にうまく機能する私のコードです。ウェブサイトで見つけて、少し修正しました。

<script>
(function ($) {
// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(header, list) { // header is any element, list is an unordered list
// create and add the filter form to the header
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text", "value":"Filterfunktion"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();


if(filter) {
// this finds all links in a list that contain the input,
// and hide the ones not containing the input while showing the ones that do
$(list).find("a:not(:Contains(" + filter + "))").parent().fadeOut();
$(list).find("a:Contains(" + filter + ")").parent().fadeIn();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
// fire the above change event after every letter
$(this).change();
});
}
//ondomready
$(function () {
listFilter($(".filter"), $(".list"));
});

$(function() {
    $(".filterinput").focus(function() {
      $(this).val('')

      });
 });

}(jQuery));
</script>

しかし、私がうまくいかないことの1つは、スクリプトが空白を含む文字列を見つけて一致させる必要があり、空白なしで入力する必要があることです。

例:

<li>DCB 112 を持っています。入力フィールドに「DCB 112」と入力すると、正しくフィルタリングされて表示されます。しかし、「DCB112」と入力すると、スクリプトはこれと一致せず、何も表示されません。解決策はありますか？

ポーランドからこんにちは！

4

2 に答える 2

1

少しねじれているかもしれませんが、リストのすべてのリンクを取得して繰り返し処理し、テキストのすべての空白を削除し、探しているテキストが含まれているかどうかを確認します。このようなもの：

var filter = $(this).val().replace(/\s+/g, '').toLowerCase();

// I'm omitting loads of code...
var text;
var index;
$(list).find('a').each(function(i, el){
    text = $(el).text().replace(/\s+/g, '').toLowerCase();
    index = text.indexOf(filter);
    if(index != -1){
        // The substring is contained -> show parent
    }else{
        // The substring is not contained -> hide parent
    }
});

私はそれをテストしていないので、それが役に立ち、うまくいくことを願っています:/

編集：

テスト済みで動作しています:)

http://jsfiddle.net/QVkuP/

于 2012-08-10T12:26:56.507 に答える
1

簡単な方法：

filter.replace(/\s/g, '');

ただし、「DCB 112」のように空白が 1 つある場合にのみうまく機能します。

難しい方法: 最初にリストをループして、一致しないリンクを削除する必要があります。比較するために、両方の値から空白を慎重に削除してください。そして良いものを見せてください。

$(list).find("a").each(function()
{
    if($(this).text().replace(/\s/g, '') == filter.replace(/\s/g, ''))
    {
        $(this).parent().fadeIn();
    }
    else
    {
        $(this).parent().fadeOut();
    }
}

それが助けになることを願っています、それはまだ醜いコーディングのように見えますが、それを行うべきです...

于 2012-08-10T12:36:14.910 に答える