jQuery фильтрует входные данные по значению, имени или идентификатору?Значение желательно - PullRequest
Новая
       39

jQuery фильтрует входные данные по значению, имени или идентификатору?Значение желательно

0 голосов
/ 20 декабря 2011

У меня есть скрипт jQuery, который позволяет мне фильтровать элементы списка при наборе текста в текстовом поле .... однако он фильтрует только текст вне тегов ...

Может кто-нибудь пожалуйстаадаптировать этот скрипт так, чтобы он фильтровал значения входных данных, в частности кнопки?

В заголовке моего html-файла: 

<script type="text/javascript" src="js/jquery.liveFilter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $(ul#filter_me').liveFilter('slide');
});
</script>

Вот текстовое поле: 

<input type="text" class="filter" name="liveFilter" />

Вот список: 

<ul id="filter_me">
<li><input type="button" value="John Slater" /></li>
<li><input type="button" value="Matt Bold" /></li>
<li><input type="button" value="Bob Cool" /></li>
</ul>

, если бы я набрал ... Джон, я бы увидел кнопку с Джоном Слейтером в качестве значения. 

<input type="button" value="John Slater" />

Вотвнешний файл JQuery: 

(function (a) {
    a.fn.liveFilter = function (d) {
        var c = a(this);
        var g;
        if (a(this).is("ul")) {
            g = "li"
        } else {
            if (a(this).is("ol")) {
                g = "li"
            } else {
                if (a(this).is("table")) {
                    g = "tbody tr"
                }
            }
        }
        var e;
        var b;
        var f;
        a("input.filter").keyup(function () {
            f = a(this).val();
            e = a(c).find(g + ':not(:Contains("' + f + '"))');
            b = a(c).find(g + ':Contains("' + f + '")');
            if (d == "basic") {
                e.hide();
                b.show()
            } else {
                if (d == "slide") {
                    e.slideUp(500);
                    b.slideDown(500)
                } else {
                    if (d == "fade") {
                        e.fadeOut(400);
                        b.fadeIn(400)
                    }
                }
            }
        });
        jQuery.expr[":"].Contains = function (j, k, h) {
            return jQuery(j).text().toLowerCase().indexOf(h[3].toLowerCase()) >= 0
        }
    }
})(jQuery);

Любая помощь будет принята с благодарностью.

Спасибо:)

1 Ответ

0 голосов
/ 20 декабря 2011

Вы должны настроить селектор :Contains. Как то так: 

jQuery.expr[":"].Contains = function (j, k, h) {

    // get children that have a "value" attribute
    // (added sort-of handling for <select> elements)
    var m = jQuery(j).children('[value], select > option[value]');

    return m.length

        // children were found, base the check on the value
        ? m.filter(function() {
                return this.value &&
                       this.value.toLowerCase().indexOf(h[3].toLowerCase()) >= 0;
            }).length > 0

        // otherwise, base on the "innerText"
        : jQuery(j).text().toLowerCase().indexOf(h[3].toLowerCase()) >= 0;
}

Я прокомментировал кусок кода для объяснения.

Вы можете проверить это на этой скрипке .

Примечание: это абсолютно неоптимизировано и может не полностью работать со всеми типами элементов (кроме input [button]), но дает вам идею.

...