帶有搜索按鈕的jQuery下拉框

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，但是.. REEDIT

<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 個解決方案

解決方案1
1 已采納 2014-12-13 13:54:08

帶有搜索按鈕的jQuery下拉框

問題描述

1 個解決方案

解決方案1 1 已采納 2014-12-13 13:54:08

解決方案1
1 已采納 2014-12-13 13:54:08