autosuggest.html

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script> <script> $(function(){ $("#search_emp").keyup(function() { var search_keyword_value = $(this).val(); var dataString = 'search_keyword='+ search_keyword_value; if(search_keyword_value!='') { $.ajax({ type: "POST", url: "search_emp.php", data: dataString, cache: false, success: function(html) { $("#result_emp").html(html).show(); } }); } return false; });

$("#result_emp").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.country_name').html();
var decoded = $("<div/>").html($name).text();
$('#search_keyword_id').val(decoded);
});

$(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keyword")){
$("#result_emp").fadeOut();
}
});

$('#search_keyword_id').click(function(){
$("#result_emp").fadeIn();
});
});

function set_emp(emp_name,emp_id) {
// change input value
$('#search_emp').val(emp_name);
$('#emp_id_search').val(emp_id);
// hide proposition list
$('#result_emp').hide();
}
</script>
<style>
#result_emp
{
position:relative;
width:320px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CDCDCD solid;
background-color: white;
}
.show
{
font-family:tahoma;
padding:10px;
border-bottom:1px #CDCDCD dashed;
font-size:15px;
}
.show:hover
{
background:#364956;
color:#FFF;
cursor:pointer;
}
</style>
<div class="form-group">
<label class="col-sm-2 control-label">Employee</label>
<div class="col-sm-10">
<input class="form-control" id="search_emp" name="emp" type="text" placeholder="" value="" autocomplete="off">
<input type="hidden" name="emp_id_search" id="emp_id_search" value="">
<div id="result_emp"></div>
</div>
</div>  ...  Read More