Question

因此，我对此很陌生，可以使用一些帮助。甚至不要以为我正确地张贴了代码：/有人知道我如何使用搜索栏显示带有数学名称的手风琴，并隐藏不匹配的手风琴。希望收到一些反馈意见：D我可以使它正常工作，但是它无法正确搜索，这使我非常困扰！谢谢！

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  position: absolute;
  right: 6%;
}

input[type=text]:focus {
  width: 25%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<br><br>
<input type="text" id="myInput" placeholder="Søk..">

<div class="container">
  <h2>Accordion Example</h2>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Test 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Test 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Test 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>
</div>

</body>

Answer 1

您忘了发布JavaScript吗？您如何在没有搜索功能的情况下使用搜索功能？另外，您的样式表参考和脚本应该在标签中

假设您要使用javascript消除不属于搜索请求的选项，则应使用此功能（在文本输入中按Enter时它将运行）：

$("#myInput").on("keydown", function myFunction(e) {
        if (e.keyCode == 13) {
            var text = $(this).val().toLowerCase();

            var parent = document.getElementById('accordion');

            for (i = 0; i < parent.children.length; i++) {
                var title = parent.children[i].children[0].children[0].children[0].textContent.toLowerCase();

                if (title.includes(text) === true) {
                    parent.children[i].setAttribute('style', 'display: block;');
                } else {
                    parent.children[i].setAttribute('style', 'display: none;');
                }
            }
        }
    });

因此您的最终代码应如下所示：

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  position: absolute;
  right: 6%;
}

input[type=text]:focus {
  width: 25%;
}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <br><br>
    <input type="text" id="myInput" placeholder="Søk..">

    <div class="container">
        <h2>Accordion Example</h2>

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Test 1</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Test 2</a>
                    </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Test 3</a>
                    </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $("#myInput").on("keydown", function myFunction(e) {
            if (e.keyCode == 13) {
                var text = $(this).val().toLowerCase();

                var parent = document.getElementById('accordion');

                for (i = 0; i < parent.children.length; i++) {
                    var title = parent.children[i].children[0].children[0].children[0].textContent.toLowerCase();

                    if (title.includes(text) === true) {
                        parent.children[i].setAttribute('style', 'display: block;');
                    } else {
                        parent.children[i].setAttribute('style', 'display: none;');
                    }
                }
            }
        });

    </script>

</body>

</html>

编辑：

对于您拥有的每个搜索文本输入，创建一个类似于第一个演示的功能，但将{--YOUR ID--}替换为该文本输入的ID。以此替换底部的脚本：

$("#{--YOUR ID--}").on("keydown", function myFunction(e) {
  function search();
});

function search() {
var text = $(this).val().toLowerCase();

        var parent = document.getElementById('accordion');

        for (i = 0; i < parent.children.length; i++) {
            var title = parent.children[i].children[0].children[0].children[0].textContent.toLowerCase();

            if (title.includes(text) === true) {
                parent.children[i].setAttribute('style', 'display: block;');
            } else {
                parent.children[i].setAttribute('style', 'display: none;');
            }
        }
}

需要帮助的全新编码器

1 个答案: