Membuat Saran Nama dengan Ajax dan PHP

Blog dengan form yakni suatu hal yang betul-betul lumrah. Karena situs selaku media peranta antara pemilik situs dengan para pengunjung yang bila kedepanya ingin tetap menjaga komunikasi, karenanya diperlukan penginputan form agar data pengunjung dapat kita simpan. Selain bagi mendata siapa saja pengunjungnya, dapat pun selaku saran informasi bila ada berita/hal terbaru yang ingin disampaikan kepada pengunjung tersebut.

Berbicara mengenai form, tentu tak lepas dari yang namanya textbox. Textbox ini yakni suatu kolom bagi mengisikan data yang berupa text. Kalian pasti telah sering melihat bermacam macam textbox dengan bermacam rupa. Namun fungsinya tetap bagi menuliskan data diri kalian berupa text. Di Artikel kali ini kita akan belajar bagaimana cara membuat saran nama dengan Ajax dan PHP. Bagi merancang hal tersebut kita pastinya menggunakan textbox. Lalu apa yang dimaksud dengan saran nama tersebut ?.

Merancang saran nama yakni ketika kalian mengetikan beberapa karakter huruf di textbox, kemudian akan muncul sebuah informasi mengenai saran kata yang akan kalian tuliskan menurut karater yang kita tulis. Misalnya di contoh kali ini kita akan merancang saran nama, jadi apabila kalian ketik huruf Al.., Karenanya nanti kemungkinan kata yang akan muncul yakni misalnya Alam, Ali, Alis,dll. Seperti itu kira-kira gambaranya.

Oke berikutnya kita mulai bagi codenya, kalian dapat ikuti code dibawah ini.

index.html

<html><br />
<head><br />
<script><br />
function showHint(str) {<br />
    if (str.length == 0) {<br />
        document.getElementById(“txtHint”).innerHTML = “”;<br />
        return;<br />
    } else {<br />
        var xmlhttp = new XMLHttpRequest();<br />
        xmlhttp.onreadystatechange = function() {<br />
            if (this.readyState == 4 && this.status == 200) {<br />
                document.getElementById(“txtHint”).innerHTML = this.responseText;<br />
            }<br />
        };<br />
        xmlhttp.open(“GET”, “gethint.php?q=” + str, true);<br />
        xmlhttp.send();<br />
    }<br />
}<br />
</script><br />
</head><br />
<body></p>
<p><p><b>Ketikan nama dibawah ini :</b></p><br />
<form><br />
Nama : <input type=”text” onkeyup=”showHint(this.value)”><br />
</form><br />
<p>Nama yang disarankan : <span id=”txtHint”></span></p><br />
</body><br />
</html>

<html>

<head>

function showHint(str) {

if (str.length == 0) {

document.getElementById(“txtHint”).innerHTML = “”;

return;

} else {

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById(“txtHint”).innerHTML = this.responseText;

}

};

xmlhttp.open(“GET”, “gethint.php?q=” + str, true);

xmlhttp.send();

}

</script>

</head>

<body>

<p><b>Ketikan nama dibawah ini :</b></p>

<form>

Nama : <input type=“text” onkeyup=“showHint(this.value)”>

</form>

<p>Nama yang disarankan : <span id=“txtHint”></span></p>

</body>

</html>

kemudian bikin satu file lagi seperti ini.

gethint.php

<?php<br />
// Nama pada array<br />
$a[] = “Anna”;<br />
$a[] = “Brittany”;<br />
$a[] = “Cinderella”;<br />
$a[] = “Diana”;<br />
$a[] = “Eva”;<br />
$a[] = “Fiona”;<br />
$a[] = “Gunda”;<br />
$a[] = “Hege”;<br />
$a[] = “Inga”;<br />
$a[] = “Johanna”;<br />
$a[] = “Kitty”;<br />
$a[] = “Linda”;<br />
$a[] = “Nina”;<br />
$a[] = “Ophelia”;<br />
$a[] = “Petunia”;<br />
$a[] = “Amanda”;<br />
$a[] = “Raquel”;<br />
$a[] = “Cindy”;<br />
$a[] = “Doris”;<br />
$a[] = “Eve”;<br />
$a[] = “Evita”;<br />
$a[] = “Sunniva”;<br />
$a[] = “Tove”;<br />
$a[] = “Unni”;<br />
$a[] = “Violet”;<br />
$a[] = “Liza”;<br />
$a[] = “Elizabeth”;<br />
$a[] = “Ellen”;<br />
$a[] = “Wenche”;<br />
$a[] = “Vicky”;</p>
<p>// mengambil data dari textbox bagi di samakan dengan nama di array<br />
$q = $_REQUEST[“q”];</p>
<p>$hint = “”;</p>
<p>// Proses mencocokan kosakata dengan nama di array<br />
if ($q !== “”) {<br />
    $q = strtolower($q);<br />
    $len=strlen($q);<br />
    foreach($a as $name) {<br />
        if (stristr($q, substr($name, 0, $len))) {<br />
            if ($hint === “”) {<br />
                $hint = $name;<br />
            } else {<br />
                $hint .= “, $name”;<br />
            }<br />
        }<br />
    }<br />
}</p>
<p>// Proses bagi data yang tak ditemukan di array<br />
echo $hint === “” ? “Tak ada nama yang disarankan” : $hint;<br />
?>

<?php

// Nama pada array

$a[] = “Anna”;

$a[] = “Brittany”;

$a[] = “Cinderella”;

$a[] = “Diana”;

$a[] = “Eva”;

$a[] = “Fiona”;

$a[] = “Gunda”;

$a[] = “Hege”;

$a[] = “Inga”;

$a[] = “Johanna”;

$a[] = “Kitty”;

$a[] = “Linda”;

$a[] = “Nina”;

$a[] = “Ophelia”;

$a[] = “Petunia”;

$a[] = “Amanda”;

$a[] = “Raquel”;

$a[] = “Cindy”;

$a[] = “Doris”;

$a[] = “Eve”;

$a[] = “Evita”;

$a[] = “Sunniva”;

$a[] = “Tove”;

$a[

(Visited 7 times, 1 visits today)

index.html

gethint.php

Leave a Reply Cancel reply