Javascript 在普通视线中隐藏文本

编辑：

我有一个手风琴和这一个相似。我有几段关于这些小组的文章。我刚刚在页面上添加了一个漂亮的搜索栏，可以对文本进行排序。与示例中的非常相似。我还需要弄清楚的是；我有没有可能有一个代码，显示这样的话：没有结果，当最后一个手风琴隐藏？这件事我真的很费劲

$myInput.onkeyup，函数mysearch{ var text=$this.val.toLowerCase； $.panel a.eachfunction{ 如果$this.text.toLowerCase.includeText{ $this.parents.panel.show； }否则{ $this.parents.panel.hide； } }; }; 输入[类型=文本]{ 宽度：130px； 框大小：边框框； 边框：2个实心ccc； 边界半径：4px； 字体大小：16px； 背景色：白色； 背景图片：url'searchicon.png'； 背景位置：10px 10px； 背景重复：无重复； 填充：12px 20px 12px 40px； -webkit过渡：宽度为0.4s，易于进出； 过渡：宽度0.4s，易于进出； 位置：绝对位置； 右：6%； } 输入[类型=文本]：焦点{ 宽度：25%； } 手风琴示例 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 这将是一次考验 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 在手风琴底部添加一点“无结果”消息，并根据结果是否可见来切换其显示，例如：

函数myFunction{ var输入、过滤器、ul、li、a、i、p、结果； 输入=document.getElementByIdmyInput； filter=input.value.toUpperCase； ul=document.getElementByIdmyUL； li=ul.getElementsByTagNameli； p=document.getElementByIdno-results； hasResults=false； 对于i=0；i-1{ 李[i].style.display=； hasResults=true； }否则{ li[i].style.display=none； } } 如果有结果{ p、 style.display='none'； }否则{ p、 style.display=； } } 我的输入{ 背景图片：url'/css/searchicon.png'； 背景位置：10px 12px； 背景重复：无重复； 宽度：100%； 字体大小：16px； 填充：12px 20px 12px 40px； 边框：1px实心ddd； 边缘底部：12px； } 密尔{ 列表样式类型：无； 填充：0； 保证金：0； } 李美儿{ 边框：1px实心ddd； 页边距顶部：-1px；/*防止双边框*/ 背景色：f6f6f6； 填充：12px； 文字装饰：无； 字号：18px； 颜色：黑色； 显示：块 } myUL li a:悬停：不是{ 背景色：eee； } 我的电话簿

没有结果

---

只需将NoResultsDiv添加到HTML中，并在没有结果匹配时使其可用。 以下是一个例子：

添加到HTML：

<div id="no_results" style="display:none">
<h3>No results</h3>
</div>

更新您的javascript：

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    no_results = document.getElementById("no_results");
    var total_results = 0;
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            total_results = total_results + 1;
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }

    if(total_results == 0)
    {
        no_results.style.display = "";
    } else {
        no_results.style.display = "none";
    }
}

hasResults是一个布尔变量，仅当搜索函数返回结果时才设置为true。否则，将使用 消息无结果：

$myInput.onkeyup，函数mysearch{ var text=$this.val.toLowerCase； var hasResults=false； $.panel a.eachfunction{ 如果$this.text.toLowerCase.includeText{ $this.parents.panel.show； hasResults=true； }否则{ $this.parents.panel.hide； } }; 如果！有结果吗{ $'noResults'.html'No Results'； } }; 输入[类型=文本]{ 宽度：130px； 框大小：边框框； 边框：2个实心ccc； 边界半径：4px； 字体大小：16px； 背景色：白色； 背景图片：url'searchicon.png'； 背景位置：10px 10px； 背景重复：无重复； 填充：12px 20px 12px 40px； -webkit过渡：宽度为0.4s，易于进出； 过渡：宽度0.4s，易于进出； 位置：绝对位置； 右：6%； } 输入[类型=文本]：焦点{ 宽度：25%； } 手风琴示例 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 这将是一次考验 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。 Lorem ipsum dolor sit amet，奉献精英， 这是临时性的劳动和就业机会。我们在这里吃得很少， 我们的实验室是一个普通的实验室。

---

在你更新了你的问题之后，我也更新了我的javascript代码。请删除您的javascript并将我的代码添加到页面末尾。 工作示例：

JS代码：

<script>
$(document).ready(function () {
    $("#myInput").on('input', function () {
        var search_term = $(this).val();

        if(search_term == '')
        {
            $(".no_result").hide();
            $(".panel-title").parent().parent().show();
            return true;
        }

        search_term = search_term.toUpperCase();

        $('.panel-title').each(function(i, obj) {
            var text = $(this).text().trim();
            if(text.toUpperCase().indexOf(search_term) > -1)
            {
                $(this).parent().parent().show();
            } else {
                $(this).parent().parent().hide();
            }

            var panel_group = $(this).parent().parent().parent();
            var panel_group_last_element = panel_group.last();

            if(panel_group_last_element.find('h2.no_result').length === 0)
            {
                var html = "<h2 class=\"no_result\" style=\"display:none;\">No results found!</h2>";
                panel_group_last_element.append(html);
            }
            if((panel_group.find('div.panel:visible').length) == 0)
            {
                panel_group_last_element.find('h2.no_result').show();
            } else {
                panel_group_last_element.find('h2.no_result').hide();
            }
        });

    });
});
</script>

---

查看我的新评论！：查看我的新评论！：查看我的新评论！：@这是一个相同的概念。跟踪显示和显示消息的li元素（如果没有）。我在其中不使用li。hmm替换.panel元素的li元素。我无法使其工作：/Sorry。。问题是，我需要我的脚本使搜索栏工作。我不能用你的更改来配置它，因为一切都很顺利。你想搜索所有手风琴组的标题吗？是的。测试1测试2等。。我有超过60个在我的原始和更多的来。所以我真的需要这个：@cosmochen看看这个。