Script PHP auto complete
Selamat pagi bagaimana kabar kalian maaf lama tidak posting karena udah kelas 12 jadi sibuk dengan pelajaran dan TA .hhe
kali ini saya akan memberikan postingan tentang autocomplete yang sering digunakan untuk pencarian seperti di mbah google
berikut scriptnya simpan dengan nama :
suggest.js
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!");
}
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('dbTxt').value);
searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('layer1');
var str1 = document.getElementById('dbTxt');
var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}
var str2 = document.getElementById('dbTxt');
var curTop=20;
if (str2.offsetParent){
while (str2.offsetParent){
curTop += str2.offsetTop;
str2 = str2.offsetParent;
}
}
var str =searchReq.responseText.split("\n");
if(str.length==1)
document.getElementById('layer1').style.visibility = "hidden";
else
ss.setAttribute('style','position:absolute;top:'+curTop+';left:'+curLeft+';width:250;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;');
ss.innerHTML = '';
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is <span class="IL_AD" id="IL_AD5">cleaner</span> using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="small">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('dbTxt').value = value;
document.getElementById('layer1').innerHTML = '';
document.getElementById('layer1').style.visibility = "hidden";
}
karena didalam fungsi ada pengambilan data searchSuggest.php
berikut ini scriptnya
<html>
<head>
<title>AJAX Autocomplete With PHP - phphunger.com</title>
</head>
<body>
<?php
include "wan_koneksi.php";
if (isset($_GET['search']) && $_GET['search'] != '') {
//Add slashes to any quotes to avoid SQL problems.
$search = $_GET['search'];
$suggest_query = mysql_query("SELECT distinct(no_pol) as autosuggest FROM parkir WHERE no_pol like('" .$search . "%') ORDER BY no_pol",$id_mysql);
while($suggest = mysql_fetch_array($suggest_query)) {
echo $suggest['autosuggest'] . "\n";
}
}
?>
</body>
</html>
udah selesai dengan dengan script suggest.js dan searchSuggest.php maka berikut untuk menampilkannya
simpan dengan tampi.php
<html>
<head>
<title>Parkir Masuk</title>
<script language="JavaScript" type="text/javascript" src="suggest.js"></script>
<body>
No Polisi kendaraan yang akan keluar :
<form id="suggestSearch" action=parkir_keluar_simpan.php method=POST>
<input type="text" id="dbTxt" alt="Search Criteria" onKeyUp="searchSuggest();" autocomplete="off"/>
<div id="layer1"></div>
<input type="submit" value="keluar">
</form>
</body>
</html>
terima kasih semoga bermanfaat.
kali ini saya akan memberikan postingan tentang autocomplete yang sering digunakan untuk pencarian seperti di mbah google
berikut scriptnya simpan dengan nama :
suggest.js
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!");
}
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('dbTxt').value);
searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('layer1');
var str1 = document.getElementById('dbTxt');
var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}
var str2 = document.getElementById('dbTxt');
var curTop=20;
if (str2.offsetParent){
while (str2.offsetParent){
curTop += str2.offsetTop;
str2 = str2.offsetParent;
}
}
var str =searchReq.responseText.split("\n");
if(str.length==1)
document.getElementById('layer1').style.visibility = "hidden";
else
ss.setAttribute('style','position:absolute;top:'+curTop+';left:'+curLeft+';width:250;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;');
ss.innerHTML = '';
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is <span class="IL_AD" id="IL_AD5">cleaner</span> using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="small">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('dbTxt').value = value;
document.getElementById('layer1').innerHTML = '';
document.getElementById('layer1').style.visibility = "hidden";
}
karena didalam fungsi ada pengambilan data searchSuggest.php
berikut ini scriptnya
<html>
<head>
<title>AJAX Autocomplete With PHP - phphunger.com</title>
</head>
<body>
<?php
include "wan_koneksi.php";
if (isset($_GET['search']) && $_GET['search'] != '') {
//Add slashes to any quotes to avoid SQL problems.
$search = $_GET['search'];
$suggest_query = mysql_query("SELECT distinct(no_pol) as autosuggest FROM parkir WHERE no_pol like('" .$search . "%') ORDER BY no_pol",$id_mysql);
while($suggest = mysql_fetch_array($suggest_query)) {
echo $suggest['autosuggest'] . "\n";
}
}
?>
</body>
</html>
udah selesai dengan dengan script suggest.js dan searchSuggest.php maka berikut untuk menampilkannya
simpan dengan tampi.php
<html>
<head>
<title>Parkir Masuk</title>
<script language="JavaScript" type="text/javascript" src="suggest.js"></script>
<body>
No Polisi kendaraan yang akan keluar :
<form id="suggestSearch" action=parkir_keluar_simpan.php method=POST>
<input type="text" id="dbTxt" alt="Search Criteria" onKeyUp="searchSuggest();" autocomplete="off"/>
<div id="layer1"></div>
<input type="submit" value="keluar">
</form>
</body>
</html>
terima kasih semoga bermanfaat.
0 komentar: