Skip to content

Instantly share code, notes, and snippets.

@dengsauve

dengsauve/jQueryAutocomplete.html

Last active August 9, 2019 08:13
Show Gist options
  • Save dengsauve/8a96780694df52c0b7d9452d7d7de307 to your computer and use it in GitHub Desktop.
Save dengsauve/8a96780694df52c0b7d9452d7d7de307 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Autocomplete Suggestions for Text Input - since bootstrap doesn't really provide one
Raw
jQueryAutocomplete.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>jQuery Text Input Suggestion Box</title>
<!-- Suggestion List Styling -->
<style>
div.suggestions{
border: 1px solid lightgrey;
border-radius: 5px;
margin-top: 1px;
visibility: hidden;
}
#suggestions{
list-style-type: none;
margin: 0;
padding: 0;
}
#suggestions li{
padding: 6px 12px;
}
#suggestions li:hover{
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="textBox">Name a state</label>
<input type="text" class="form-control" id="textBox" name="textBox"/>
<div class="suggestions">
<ul id="suggestions">
</ul>
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Suggestion List Logic -->
<script>
$(document).ready(function(){
// Whatever text list you want
let itemList = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
let suggestions = $('#suggestions');
// Every keyup in the input box refreshes the suggestions
$('#textBox').keyup(function() {
// reset the suggestions
suggestions.empty();
// Get the search term
let term = $(this).val().toLowerCase();
let count = 0;
$.each(itemList, function(index,value){
if(value.toLowerCase().indexOf(term) > -1 && term != ''){
if(count < 10) suggestions.append("<li>"+value+"</li>");
count++;
}
});
// Determine whether or not to show the suggestion box (don't if no suggestions)
if(suggestions.children().length > 0) {
$('div.suggestions').css("visibility", "visible");
}else{
$('div.suggestions').css("visibility", "hidden");
}
});
// Handle clicking on item
$("#suggestions").on('click', 'li', function() {
$("#textBox").val($(this).text());
$('div.suggestions').css("visibility", "hidden");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment