I am currently working on implementing a feature to filter an array based on user input of a city. While I have successfully populated the drop-down menu, I am encountering an issue with the search bar functionality. The goal is to filter the array list according to what the user types in, but I am struggling to make the if statement work.
HTML :
<html>
// HTML code
<body>
<div class="jumbotron">
<br>
<button id="trigger-btn" class="btn">
</button>
<div id="container" class="hide">
<input type="text" id="search" class="form-control"/>
<br>
</div>
</div>
<span class="cities" id="cities"></span>
</body>
</html>
Javascript :
// Array of Cities in Colorado
var Cities_Colorado = ["ACRES GREEN", "AGUILAR", "AIR FORCE ACADEMY", "AKRON", "ALAMOSA", "ALAMOSA EAST", "ALLENSPARK", "ALMA", "ANTONITO", "APPLEWOOD", "ARBOLES",
"ARISTOCRAT RANCHETTES", "ARRIBA", "ARVADA", "ASPEN", "ASPEN PARK", "ATWOOD", "AULT", "AURORA", "AVON", "AVONDALE", "BASALT", "BATTLEMENT MESA", "BAYFIELD",
"BENNETT", "BERKLEY", "BERTHOUD", "BETHUNE", "BEULAH VALLEY", "BLACK FOREST", "BLACK HAWK", "BLANCA", "BLUE RIVER", "BONANZA", "BOONE", "BOULDER", "BOW MAR",
"BRANSON", "BRECKENRIDGE", "BRIGHTON", "BROOKSIDE", "BROOMFIELD", "BRUSH", "BUENA VISTA", "BURLINGTON", "BYERS", "CALHAN", "CAMPION", "CAMPO", "CANON CITY",
"CARBONDALE"]
// Filter List
$(document).ready(function(){
$('#trigger-btn').click(function(){
$('#container').toggleClass('hide')
})
$.each(Cities_Colorado, function(key,value){
(" "+key+ ": "+ value);
$("#container").append("<span>" +"<li>"+value+ "</li>"+"</span>");
$("#search").each(function(){
$(value).text().indexOf();
// Array Filtering
$(value).keyup(function(){
var test=$(key).val()
if ( indexOf( value ) === -1 ) {
}else{
}
})
})
})
})