jquery drop down box with search button
Question
My projects requires that I need a drop down box with search button .I created one but its working only for the first time .The issue is I am making the other items empty if search match is found .So the next click since other items are empty its not working. How should I solve this so that all the items appear first time and only the matching item appears every time a match appears.Please help me.How should I fix it? I have tried a lot on this ,.This is my code.
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>
script
$(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();
}
}
})
1 answers
solution1
1 ACCPTED 2014-12-13 13:54:08
you must recreate your dropdown box, for this dont use document.write, but.. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.