在div中包含标签的Jquery过滤器:contains

时间:2016-02-16 14:27:47

标签: jquery asp.net

不确定之前是否曾询问过此事。

我有一个div类.row(我正在使用bootstrap)。在行内有多个列,每个列都有一个标签。

我必须按照其中的标签过滤行(使用标签组合)。我怎么能这样做呢?

我有以下代码,但它不起作用。这是因为我不能按标签过滤。目前,过滤器按任何项目过滤!

创建行的代码:

function FillSelectSupplier(returnedInformation, chkButton) {
    var rows = returnedInformation.split('~');
    rows.splice(rows.length - 1, 1);
    if (rows.length > 0) {
        $('#divJobsContainer').css('max-height', '585px');
        var html = '<div class="row row-large-gap"><div class="col-sm-1"><label>Q-Num</label></div><div class="col-sm-1"><label>C-Num</label></div><div class="col-sm-5"><label>Name</label></div><div class="col-sm-5"><label>Client Name</label></div></div>';
        for (var row in rows) {
            var dataItems = rows[row].split('|');
            if (dataItems.length > 0) {
                var name = dataItems[3].toLowerCase();
                name = (name.length > 34 ? name.substring(0, 33) + "..." : name);
                var clientName = dataItems[4].toLowerCase();
                clientName = (clientName.length > 34 ? clientName.substring(0, 33) + "..." : clientName);
                html += '<div class="row rowToFilter"><hr /><div class="col-sm-1"><label class="text-left">' + dataItems[1] + '</label></div>' +
                    '<div class="col-sm-1"><label class="text-left">' + dataItems[2] + '</label></div>' +
                    '<div class="col-sm-5"><label class="text-left pull-left marginLeft">' + name + '</label></div>' +
                    '<div class="col-sm-5"><label class="text-left pull-left lblClientName">' + clientName + '</label><input type="button" class="pull-right btn btn-primary btn-xs btnSelectChoice" value="' + (chkButton ? "Change" : "Select") + '" id="' + dataItems[0] + '" /></div></div>';
            } else {
                html = '<div class="singleSupplierArea"><label class="text-danger">No Data Found</label></div>';
                $('#divJobsContainer').append(html);
                return;
            }
        }
        $('#divJobsContainer').append(html);
        if (chkButton) {
            var moreHtml = '<div class="row row-large-gap-bottom" id="changeDateDiv"><div class="col-sm-12 text-center"><div class="input-group input-group-sm"><span class="input-group-addon" id="chgDate">Change Date</span><input type="text" id="txtChangeDate" class="form-control"><span class="input-group-btn"><button runat="server" id="btnChangeNewDate" class="btn btn-default" type="button">Go!</button></span></div></div></div>';
            $('#divJobsContainer').css('max-height', '485px');
            $('.modal-body').prepend(moreHtml);
            $(document).on('focus', '#txtChangeDate', function () {
                $(this).datepicker({
                    autoclose: true,
                    clearBtn: true,
                    endDate: "0d",
                    format: "dd/mm/yyyy",
                    todayBtn: true,
                    todayHighlight: true,
                });
            });

        }
    }
}

onkeyup的代码:

$('#txtClientName, #txtProjectName, #txtCnoFilter, #txtQnoFilter').keyup(function () {
    var rows = $('#divJobsContainer').find("div.rowToFilter").hide();
    var clientName = $('#txtClientName').val();
    var txtProjectName = $('#txtProjectName').val();
    var txtCNo = $('#txtCnoFilter').val();
    var txtQnoFilter = $('#txtQnoFilter').val();


    if (txtQnoFilter == "" && clientName == "" && txtProjectName == "" && txtCNo == "") {
        rows.show();
    } else {
        rows.filter(":containsIgnoreCase('" + clientName + "')")
            .filter(":containsIgnoreCase('" + txtProjectName + "')")
            .filter(":containsIgnoreCase('" + txtCNo + "')")
            .filter(":containsIgnoreCase('" + txtQnoFilter + "')").show();
    }

});

$.extend($.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
}
);

编辑:已添加:containignoreCase

0 个答案:

没有答案