Question

我从指定（ul -> li）中的标签添加数据搜索引擎时遇到的错误是：

当我在搜索引擎中添加文本时，搜索输入消失

    jQuery.fn.filterByText = function(textbox) {
      return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('li').each(function() {
          options.push({
            value: $(this).val(),
            text: $(this).text()
          });
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
          var options = $(select).empty().data('options');
          var search = $.trim($(this).val());
          var regex = new RegExp(search, "gi");

          $.each(options, function(i) {
            var option = options[i];
            if (option.text.match(regex) !== null) {
              $(select).append(
                $('<li>').text(option.text).val(option.value)
              );
            }
          });
        });
      });
    };

    /*$(function() {
      $('.options').filterByText($('input'));
    });*/

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}
/*
.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}
*/
li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li.search {
  padding: 0.5rem 0;
}

li>img {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div class="selected">Select an option</div>
    <ul class="options">
      <li class="search"><input type="text" id="search"></li>
      <li class="option"><span>Option 1</span></li>
      <li class="option"><span>Option 2</span></li>
      <li class="option"><span>Option 3</span></li>
      <li class="option"><span>Option 4</span></li>
      <li class="option"><span>Option 5</span></li>
      <li class="option"><span>Option 6</span></li>
      <li class="option"><span>Option 7</span></li>
      <li class="option"><span>Option 8</span></li>
      <li class="option"><span>Option 9</span></li>
      <li class="option"><span>Option 10</span></li>
      <li class="option"><span>Option 11</span></li>
      <li class="option"><span>Option 12</span></li>
      <li class="option"><span>Option 13</span></li>
      <li class="option"><span>Option 14</span></li>
      <li class="option"><span>Option 15</span></li>
      <li class="option"><span>Option 16</span></li>
      <li class="option"><span>Option 17</span></li>
      <li class="option"><span>Option 18</span></li>
      <li class="option"><span>Option 19</span></li>
      <li class="option"><span>Option 20</span></li>
      <li class="option"><span>Option 21</span></li>
      <li class="option"><span>Option 22</span></li>
      <li class="option"><span>Option 23</span></li>
      <li class="option"><span>Option 24</span></li>
      <li class="option"><span>Option 25</span></li>
      <li class="option"><span>Option 26</span></li>
      <li class="option"><span>Option 27</span></li>
      <li class="option"><span>Option 28</span></li>
      <li class="option"><span>Option 29</span></li>
      <li class="option"><span>Option 30</span></li>
      <li class="option"><span>Option 31</span></li>
      <li class="option"><span>Option 32</span></li>
      <li class="option"><span>A</span></li>
      <li class="option"><span>B</span></li>
      <li class="option"><span>C</span></li>
      <li class="option"><span>D</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>H</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>E</span></li>
      <li class="option"><span>A</span></li>
      <li class="option"><span>Other</span></li>
    </ul>
  </div>
</form>

我的想法是，如果我搜索一个仅显示该记录但不显示其他记录的现有特定单词，则仅显示搜索引擎中一致的数据

我在寻找其他示例代码，但只在网上找到了该代码

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

请您告诉我代码中我做错了什么。

Answer 1

我做了一个简单的jsfiddle，在我发布的fiddle here的第二个链接中工作正常。

您必须从ul中删除输入，否则它将被过滤，或者您以不同的方式处理

project A
RouterModule.forRoot(projectB-Routes)

Project B
RouterModule.forChild(Routes[]);

如何从ul查找数据？

1 个答案: