Skip to content

Instantly share code, notes, and snippets.

@abhishek-9ithub

abhishek-9ithub/autoSearch.html

Created November 25, 2017 09:43
Show Gist options
  • Save abhishek-9ithub/15789cda86d8fa24b1c57de73a437489 to your computer and use it in GitHub Desktop.
Save abhishek-9ithub/15789cda86d8fa24b1c57de73a437489 to your computer and use it in GitHub Desktop.
Download ZIP
auto search on type
Raw
autoSearch.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Search</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input.autoSearch-input {
margin: 0 0 0px;
border: 1px solid #cdcdcd;
width: 100%;
border-radius: 3px;
-webkit-appearance: none;
padding: 8px 10px;
font-size: 16px;
color: #062746;
background-color: #fff;
}
ul.autoUl {
list-style: none;
padding: 0;
margin: 0;
position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}
ul.autoUl li a {
display: block;
padding: 8px 10px;
font-size: 16px;
color: rgba(0, 0, 0, 0.87);
cursor: pointer;
}
ul.autoUl li a:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.08);
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Auto Search</h1>
<p>Jquery Auto seach</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="demo" class="auto-search-wrap">
<select class="hidden">
<option value="0">Abhishek Mishra</option>
<option value="1">Option One</option>
<option value="2">Train</option>
<option value="3">Bus</option>
<option value="4">Aeroplanne</option>
<option value="5">Qutubminar</option>
<option value="6">Tajmahal</option>
<option value="7">Lucknow</option>
<option value="8">Kolkata</option>
<option value="9">Chennai</option>
<option value="10">Kanpur</option>
<option value="11">Noida</option>
</select>
<input type="text" class="autoSearch-input">
<input type="hidden" class="autoSearch-hiddenId">
<input type="hidden" class="autoSearch-hiddenVal">
</div>
</div>
</div>
</div>
<div id="test"></div>
</body>
<script>
$(function() {
var arr = ['abhi-12', 'zzza-13', 'asdsd-67', 'dasdasd-87']; //array of hint data
$('.auto-search-wrap').append('<ul class="autoUl"></ul>');
$('.autoSearch-input').keyup(function() {
if ($(this).val().length > 0) {
$('.autoUl').html('');
$('.autoSearch-hiddenId').val('');
$('.autoSearch-hiddenVal').val('');
myFunction();
} else {
$('.autoUl').html('');
$(this).val('');
$('.autoSearch-hiddenId').val('');
$('.autoSearch-hiddenVal').val('');
}
});
function checkAdult(age) {
return age.indexOf($('.autoSearch-input').val()) > -1;
}
function resetList(ele) {
$(ele).find('li').each(function(key, val) {
if (key > 4) {
$(this).remove();
}
});
}
function myFunction() {
var str = arr.filter(checkAdult);
for (var i = 0; i < str.length; i++) {
var eleKey = str[i].split('-');
$('.autoUl').append('<li><a href="javascript:void(0);" data-id="' + eleKey[1] + '">' + eleKey[0] + '</a></li>');
resetList('.autoUl');
}
}
//click to result
$('body').on('click', '.autoUl a', function() {
$('.autoSearch-hiddenId').val($(this).attr('data-id'));
$('.autoSearch-hiddenVal').val($(this).text());
$('.autoSearch-input').val($(this).text());
$(this).parents('ul').html('');
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment