1
  1. 我在同一个 html 页面上有多个词汇表。
  2. 在每个词汇表上方，我想让用户在字段中输入单词或短语，以仅查看包含输入单词或短语的表行。例如，如果输入“orde”，则不包含字符串“orde”的表格行将消失。如果您访问http://www.amanado.com/idioma-colombiano/ ，这已经可以使用，单击“Vocabulario (oficial y de jerga) - palabras y frases comunes”以展开手风琴部分，然后输入“orde”在“Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla”字样下方的字段中。输入“orde”后，词汇表中除了 2 行之外的所有行都应该消失（保留 2 行）。
  3. 我有2个问题。我遇到的第一个问题是我无法在页面上的每个词汇表上方重复表单域，因为当我这样做时，只有第一次出现的表单域是有效的。我遇到的第二个问题是我希望表单字段仅适用于其正下方表格的所有行。目前，表单字段适用于页面上具有“myTable”类的所有表的所有行。也许我可以以某种方式为每个表指定一个表 id，然后让表上方的表单字段仅适用于表单字段正下方的表的表 id。而且，无需添加太多 javascript 或额外的 css 类就可以实现这一点（最好避免添加更多的 css 类）。
  4. 以下是（a）出现在我的html中的表单字段；(b) 出现在我的 html 中的打开表格标记的示例；(c) 我正在使用的 javascript。
  5. 我不是软件工程师，但如果有人告诉我具体要做什么，我确实知道如何实施更改（例如，进行准确的更改，然后进行准确的更改，然后进行准确的更改）。我感谢任何人可以提供的任何帮助，特别感谢文字说明。

(a) 表单域从这里开始

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input id="filter" class="text-input" type="text" value="Mostrar sólo filas que contengan..." onFocus="clearText(this)" onBlur="clearText(this)" />
</form>

(a) 表单域到此结束

(b) open table 标签从这里开始

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

(b) open table 标签到此结束

(c) javascript 从这里开始（来源： http: //www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/；我对这个 javascript 做了 1 处修改以使它仅适用于带有 class="myTable" 的表格行）

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$('table[class="myTable"] tr').each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text(" Total = "+count);
});
});

(c) javascript 到此结束

甜菜根建议的变化分析从这里开始

甜菜根，谢谢。我实施了您建议的更改。结果，我发现了 4 个小 bug，我相信它们都比你已经解决的更容易解决。＃1 和＃2 是showstoppers 和＃3 和＃4 我可以管理。如果您或其他人可以指导我如何消除下面 #1 和 #2 的错误，那就太好了。我非常感谢您已经提供的亲切帮助。

1)当找到 1 或匹配时，过滤器计数是正确的。但是，清空输入字段后，显示的是表格总行数，这个数字是不正确的。显示的数字是“1”到高。例如，转到此问题顶部 #2 中提供的同一 Amanado.com 链接（Stackoverflow 不允许我添加另一个链接到此问题 b/c 我是新用户），展开“Vocabulario (oficial y de jerga) - abreviaturas comunes" 手风琴，在 "Ingresa palabra o frase en el siguiente campo para filtrar la informationación de la tabla" 字样下方的输入字段中输入 "ap" ，结果是 "2" 行，其中是正确的。然后通过删除“ap”来清除输入字段，结果是“19”行，这是不正确的（正确的行数是“ 请注意，我对 Beetroot 的建议更改做了 1 处更改，即出于外观/美学原因，我将 $count.text(" Total = " + count) 更改为 ("(" + count + ")")。我希望这与这个不正确的过滤器计数问题无关。请注意，我对 Beetroot 的建议更改做了 1 处更改，即出于外观/美学原因，我将 $count.text(" Total = " + count) 更改为 ("(" + count + ")")。我希望这与这个不正确的过滤器计数问题无关。

2)在输入字段中输入值时，表头行丢失。但是，表格标题行应始终可见。请注意上面的#1，当表头行消失时，行数是正确的，当表头行存在时，行数不正确（“1”太多）。

3）删除标签后，输入字段的css丢失/不正确。下面是我正在使用的 css。我尝试在javascript中用“live-search”替换“input-text”，并在输入字段中将class =“input-text”更改为“live-search”，但这并没有恢复css，所以我消除了这些更改并返回到您提供的javascript和输入字段。所以，就目前而言，我继续拥有无关标签，因为当标签被删除时，我还没有成功地让 css 工作。

4)当“0”出现在以下标签中时，“0”出现在页面上至少第一次出现输入字段。但是，当没有输入任何内容时，不应出现“0”。如果在未输入任何内容时出现“0”，则“0”是不正确/具有误导性的，因为所有表行都是可见的，并且正确的过滤器计数应该是可见表行的总和减去表头行的“1”。为了解决这个问题，我从 中删除了“0”，这消除了表行可见时“0”的出现，这似乎没有引起任何新问题。

Changed from:   <span class="filter-count">0</span>
Changed to:     <span class="filter-count"></span>

5)下面是我在进行 Beetroot 建议的更改后使用的当前 (a) 输入字段、(b) 表打开标记、(c) css 和 (d) javascript。

(a) 输入字段从这里开始

<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para    filtrar la información de la tabla</p>
<input class="input-text" type="text" value="Mostrar sólo    filas que contengan..." />
<span class="filter-count"></span>
</form>

(a) 输入字段到此结束

(b) 表打开标签从这里开始

<table class="myTable" summary="Palabras y frases (oficiales y de jerga)">

(b) 表格打开标签到此结束

(c) css 从这里开始

.live-search {
overflow: hidden; 
width: 100%; 
padding: 8px 0; 
border: 0px solid #e3e3e3; 
margin-bottom: 10px;
font-size: 12px;
color: rgb(61, 61, 61) !important;
}

.live-search input {
border:1px solid #ddd;
padding:5px 8px;
width:300px; 
font-size: 12px;
color: rgb(61, 61, 61) !important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.live-search input:focus {
border-color: #c3c3c3;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2);     
}

(c) css 到此结束

(d) javascript 从这里开始

$(function() {
$(".input-text").keyup(function() {
var $this = $(this),
count = 0,
pattern = new RegExp($this.val(), "i"),
$group = $this.closest(".group"),
$count = $group.find(".filter-count");
$group.find(".myTable tr").each(function() {
$tr = $(this);
if ($tr.text().search(pattern) < 0) {
$tr.fadeOut();
} else {
$tr.show();
count++;
}
$count.text("(" + count + ")")
});
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
});

(d) javascript 到此结束

4

1 回答 1

1

这里的技巧是相对于当前正在接收文本的输入元素工作。

指示：

  • 修改文本输入字段以读取<input class="text-input" type="text" value="Mostrar sólo filas que contengan..." />并添加到所有其他相关组。这些字段不需要包含在<form></form>标签中，除非表单用于其他用途。
  • 添加<span class="filter-count">0</span>（或类似）到所有相关组。该元素将接收count统计信息。
  • 删除函数 clearText。
  • 将javascript修改为如下：

：

$(function() {
    $(".text-input").keyup(function() {
        var $this = $(this),
            count = 0,
            pattern = new RegExp($this.val(), "i"),
            $group = $this.closest(".group"),
            $count = $group.find(".filter-count");
        $group.find(".myTable tr").each(function() {
            $tr = $(this);
            if ($tr.text().search(pattern) < 0) {
                $tr.fadeOut();
            } else {
                $tr.show();
                count++;
            }
        });
        $count.text(" Total = " + count);
    }).on('focus blur', function() {
        if (this.defaultValue == this.value) this.value = '';
        else if (this.value == '') this.value = this.defaultValue;
    });
});

未经测试，因此可能需要调试。当它工作时，它应该比当前代码快得多。

编辑

这是一个新版本，它修复了以前的错误并进一步提高了性能。

$(function() {
    $(".text-input").on('keyup', function(e) {
        var disallow = [37, 38, 39, 40];//ignore arrow keys
        if($.inArray(e.which, disallow) > -1) {
            return true;
        }
        var inputField = this,
            val = this.value,
            pattern = new RegExp(val, "i"),
            $group = $(this).closest(".group"),
            $trs = $group.find(".myTable tbody tr"),
            $s;
        if(val === '') {
            $s = $trs;
        }
        else {
            $s = $();
            $trs.stop(true,true).each(function(i, tr) {
                if(val !== inputField.value) {//if user has made another keystroke
                    return false;//break out of .each() and hence out of the event handler
                }
                $tr = $(tr);
                if ($tr.text().match(pattern)) {
                    $s = $s.add(tr);
                }
            });
            //$trs.not($s).fadeOut();
            $trs.not($s).hide();
        }
        $group.find(".filter-count").text("(" + $s.show().length + ")");
    }).on('focus blur', function() {
        if (this.defaultValue == this.value) this.value = '';
        else if (this.value == '') this.value = this.defaultValue;
    });

    $(".group").each(function() {
        $this = $(this);
        $this.find(".filter-count").text("(" + $this.find("tbody tr").length + ")");
    });
});

您可以尝试.fadeOut()，但我个人更喜欢使用.hide().

于 2012-07-01T00:16:38.980 回答