Autocomplete Textbox Jquery with Database PHP
Autocomplete Textbox Jquery with Database php using Jquery, mysql,
json_encode, htmlentities, stripslashes, strip_tags, trim,
mysqli_connect, mysqli_query, autocomplete, array_push
<html>
<head>
<script src="jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
</head>
<body>
<div cl-ass="container">
<div cl-ass="row">
<div class="col-lg-12" style="padding-top:10px;">
<input type="text" name="Name" id="Name" class="form-control" placeholder="Enter First Name" />
<input type="hidden" name="ID" id="ID" class="form-control" />
<input type="text" name="Email" id="Email" class="form-control" placeholder="Enter Email" />
<input type="text" name="Address" id="Address" class="form-control" placeholder="Enter Address" />
</div>
</div>
</div>
</body>
</html>
<style>
.bold-text {
font-weight: bold;
}
</style>
<script>
$(function() {
//Start : highlight Search term Script
$.extend( $.ui.autocomplete.prototype, {
_renderItem: function( ul, item ) {
var re = new RegExp( "(" + this.term + ")", "gi" ),
cls = this.options.highlightClass,
template = "<span cl-ass='" + cls + "'>$1</span>",
label = item.label.replace( re, template ),
$li = $( "<li/>" ).appendTo( ul );
$( "<a/>" ).attr( "href", "#" )
.html( label )
.appendTo( $li );
return $li;
}
});
//END : highlight Search term Script
$(".form-control").autocomplete({
source: "getData.php",
matchContains: true,
minLength:3,
highlightClass: "bold-text",
select: function(event,selectRow){
$(this).val('');
$("#ID").val(selectRow.item.id);
$("#Email").val(selectRow.item.email);
$("#Address").val(selectRow.item.address);
$("#Name").val(selectRow.item.name);
return false;
},
});
});
</script> More details visit :https://www.elearn99.com/programming/autocomplete-textbox-jquery-database-php/245/
Comments
Post a Comment