searching lists based on selected option using jquery
Question
<.-- display only the items in list whose starting letter matches selected option from the drop down list --> $("document").ready(function() { $("#alphalist").change(function(){ $(".lists");hide(). $("#" + $(this).val());show(); }); }). <,-- Searching list--> $("#searchbox").on("keyup". function() { var value = $(this);val().toLowerCase(). $("div.lists li").filter(function() { $(this).toggle($(this).text();toLowerCase().indexOf(value) > -1) }). }) <.-- Removing text value from search bar on clicking another option --> $(".dropdown");change(function() { $(';input').val(""); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <select class="dropdown" id="alphalist"> <option value="a" selected>A</option> <option value="b">B</option> </select> <input class="input" type="text" id="searchbox" name="query" placeholder="Search...."/> <div class="lists" id="a"> <ul id="alist"> <li><a href="#">All is well</a></li> <li><a href="#">Any body can dance</a></li> <li><a href="#">As you like it</a></li> </ul> </div> <div class="lists" id="b" style="display:none"> <ul id="blist"> <li><a href="#">Before the sunset</a></li> <li><a href="#">Blink your eyes</a></li> <li><a href="#">Bukkle up</a></li> </ul> </div> </body> </html>
Here I craeted 2 options, A and B. Then two ul lists are created. First jquery code displays only the list items whose first letter matches the selected option text. ie if we click option B, it displays only list items starting with letter B. Then a searching is performed which selects matched list items.
So the real problem occurs during changing of options. For example, if we select option B, and starts typing some letters(so that it will show results if available) and for some reason, if we try to the choose option A, item list starting with letter A will not be displayed.
$(".dropdown").change(function() {
$('.input').val("");
});
This code removes currently written texts from input box. But we have to manually enter a backspace in input box to display the A lists. How to overcome this?
1 answers
solution1
1 ACCPTED 2020-07-28 22:06:51
Your issue is in this event handler:
$(".dropdown").change(function() {
$('.input').val("");
});
But we have to manually enter a backspace in input box to display the A lists. How to overcome this?
You need to trigger the keyup event after you empty the input field:
$("#searchbox").trigger('keyup');
The snippet:
$("#alphalist").on('change', function(e){ $(".lists").hide(); $("#" + $(this).val()).show(); }); $("#searchbox").on("keyup", function(e) { var value = $(this).val().toLowerCase(); $("div.lists li").each(function() { var x = $(this).text().toLowerCase().indexOf(value) > -1; $(this).toggle(x) }); }); $(".dropdown").change(function() { $('.input').val(""); $("#searchbox").trigger('keyup'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="dropdown" id="alphalist"> <option value="a" selected>A</option> <option value="b">B</option> </select> <input class="input" type="text" id="searchbox" name="query" placeholder="Search...."/> <div class="lists" id="a"> <ul id="alist"> <li><a href="#">All is well</a></li> <li><a href="#">Any body can dance</a></li> <li><a href="#">As you like it</a></li> </ul> </div> <div class="lists" id="b" style="display:none"> <ul id="blist"> <li><a href="#">Before the sunset</a></li> <li><a href="#">Blink your eyes</a></li> <li><a href="#">Bukkle up</a></li> </ul> </div>
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.