Question

我的项目要求我需要一个带搜索按钮的下拉框。我创建了一个，但它只是第一次工作。问题是如果找到搜索匹配，我正在使其他项为空。所以下一次点击其他项目是空的它不起作用。我应该如何解决这个问题，以便所有项目第一次出现，每次匹配时只出现匹配的项目。请帮助我。我该如何解决？我在这方面做了很多尝试，这是我的代码。

HTML

<html>
<head>
<script src="jquery-1.11.0.js"></script>
</head>
<style>
.sel-box{
position:relative;
}
a{
text-decoration:none;
}
#select{
display:block;
width:235px;
height:20px;
border:1px solid #999;
padding:5px;
}
.toc-odd{
position:absolute;
top:32px;
background:#f1f1f1;
width:400px;
display:none;
}
.toc-odd li{
padding:5px 10px;
border-bottom:1px solid #999;
}
</style>
 <body>
  <p id ="demo"></p>

  <div class="sel-box">
 <span id='select'>Select</span>
 <ul class='toc-odd level-1' id="sel-option">
 </body>
</html>

脚本

$(function() {
    $('#select').click(function() {
      $('#sel-option').show();
      var x = $("#sel-option .my_div").text();
      $("#demo").html(x);

    });

    $('#sel-option a').click(function() {
      $('#select').text($(this).text());
      $('#sel-option').hide();
      $(this).addClass('current');
      e.preventDefault();
    })
  })


  var employees = [{
    "firstName": "John",
    "lastName": "Doe"
  }, {
    "firstName": "Anna",
    "lastName": "Smith"
  }, {
    "firstName": "Peter",
    "lastName": "Jones"
  }, ];
document.write("<div class=my_div>");
document.write("<li>" + "<input type=text id=searchTXT name=firstName >" + "<" + "button id=button1" + ">" + "Search " + "</button>");
document.write("</div>");
for (i = 0; i < employees.length; i++) {
  document.write("<div class=" + employees[i].firstName + ">");
  document.write("<li>" + "<a href=" + employees[i].firstName + ">" + employees[i].firstName + "</a>" + "</li>");
  document.write("</div>");
}

document.write("</ul>");

$("#sel-option button").click(function() {

  var x = $("#sel-option input").val();

  for (i = 0; i < employees.length; i++) {
    if (x != employees[i].firstName) {
      $("." + employees[i].firstName).empty();
    }

  }

})

Answer 1

你必须重新创建你的下拉框，为此不要使用document.write，但.. 的重新编辑

<p id ="demo"></p> <div class="sel-box"> <span id='select'>Select</span> <ul class='toc-odd level-1' id="sel-option"></ul> <div class="my_div"> <input type=text id=searchTXT name=firstName/> <button id=btnSearch>Search</button> <div id="myDropDown"></div> </div> </div> <script> function createDropDown(){ htm = "" for (i = 0; i < employees.length; i++) { htm += "<div class=" + employees[i].firstName + ">"; htm += "<li>" + "<a href=" + employees[i].firstName + ">" + employees[i].firstName + "</a>" + "</li>"; htm += "</div>" $("#myDropDown").html(htm) } } createDropDown() $("#btnSearch").click(function() { console.log("click..") createDropDown() var x = $("input#searchTXT").val(); for (i = 0; i < employees.length; i++) { if (x != employees[i].firstName) { $("." + employees[i].firstName).empty(); console.log("empty " + x) } } }) </script>

带搜索按钮的jquery下拉框

1 个答案: