Skip to content

Instantly share code, notes, and snippets.

@afsinka

afsinka/index.html

Created August 2, 2017 18:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save afsinka/401dcd63d6a49f5449d3939a14f3ccdd to your computer and use it in GitHub Desktop.
Save afsinka/401dcd63d6a49f5449d3939a14f3ccdd to your computer and use it in GitHub Desktop.
Download ZIP
Filter in Select Option List With Textbox
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>Title</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#searchBox").keyup(function() {
searchInList();
});
});
var searchInList = function() {
var myOptions = document.getElementById($('#myOptions').get(0).id);
var searchBox = document.getElementById($('#searchBox').get(0).id);
$.each(myOptions, function(index, item) {
$(item).hide();
var writtenValue = item.innerText.toUpperCase();
var searchedValue = searchBox.value.toUpperCase();
if (writtenValue == "" || searchedValue == "" || writtenValue.indexOf(searchedValue) >= 0) {
$(item).show();
}
});
};
</script>
<input type="text" id="searchBox">
<br />
<select name="myOptionsName" id="myOptions" multiple style="width: 200px;">
<option value="VOLVO">VOLVO</option>
<option value="SAAB">SAAB</option>
<option value="MERCEDES">MERCEDES</option>
<option value="AUDI">AUDI</option>
</select>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment