Sunday, 19 February 2012

Membuat Script Autocomplete menggunakan AJAX

Apa yang dimaksud AJAX??

Ajax atau Asynchronous JavaScript and XML adalah suatu teknologi dalam pemrograman web yang memungkinkan perubahan pada suatu halaman web tanpa melalui proses loading refresh secara keseluruhan sehingga membuat web lebih interaktif. 

Dengan adanya ajax, akses data dari server ke client menjadi lebih cepat dari pada mekanisme biasa. Hal ini dikarenakan ajax tidak perlu berpindah halaman atau meload seluruh halaman untuk melakukan suatu perubahan pada suatu halaman web.

Dalam artikel ini kita akan membuat halaman web sederhana layaknya sebuah mesin pencari seperti google dengan menampilkan form autocomplete dengan menggunakan ajax.




Apa yang dimaksud AJAX??

Ajax atau Asynchronous JavaScript and XML adalah suatu teknologi dalam pemrograman web yang memungkinkan perubahan pada suatu halaman web tanpa melalui proses loading refresh secara keseluruhan sehingga membuat web lebih interaktif. 

Dengan adanya ajax, akses data dari server ke client menjadi lebih cepat dari pada mekanisme biasa. Hal ini dikarenakan ajax tidak perlu berpindah halaman atau meload seluruh halaman untuk melakukan suatu perubahan pada suatu halaman web.

Dalam artikel ini kita akan membuat halaman web sederhana layaknya sebuah mesin pencari seperti google dengan menampilkan form autocomplete dengan menggunakan ajax.


Anda mungkin perlu sedikit mengerti tentang html, css, dan javascript, tapi saya tidak menjelaskan lebih dalam tentang hal itu. Anda bisa mencarinya di internet.

Sekarang kita membuat 4 buah file yang diletakkan dalam satu folder yaitu script.html, script.js, script.css dan us-states.xml.

1. script.html
<html>
<head>
    <title>Auto-fill states</title>
    <link rel="stylesheet" rev="stylesheet" href="script.css" />
    <script src="script.js" type="text/javascript">
    </script>
</head>
<body>
    <form action="#">
        Please enter your state:<br />
        <input type="text" id="searchField" autocomplete="off" /><br />
        <div id="popups"> </div>
    </form>
</body>
</html>


2. script.js

window.onload = initAll;
var xhr = false;
var statesArray = new Array();

function initAll() {
    document.getElementById("searchField").onkeyup = searchSuggest;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }

    if (xhr) {
        xhr.onreadystatechange = setStatesArray;
        xhr.open("GET", "us-states.xml", true);
        xhr.send(null);
    }
    else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
    }
}

function setStatesArray() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            if (xhr.responseXML) {
                var allStates = xhr.responseXML.getElementsByTagName("item");
                for (var i=0; i<allStates.length; i++) {
                    statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
                }
            }
        }
        else {
            alert("There was a problem with the request " + xhr.status);
        }
    }
}

function searchSuggest() {
    var str = document.getElementById("searchField").value;
    document.getElementById("searchField").className = "";
    if (str != "") {
        document.getElementById("popups").innerHTML = "";
  
        for (var i=0; i<statesArray.length; i++) {
            var thisState = statesArray[i].nodeValue;
  
            if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) {
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = thisState;
                tempDiv.onclick = makeChoice;
                tempDiv.className = "suggestions";
                document.getElementById("popups").appendChild(tempDiv);
            }
        }
        var foundCt = document.getElementById("popups").childNodes.length;
        if (foundCt == 0) {
            document.getElementById("searchField").className = "error";
        }
        if (foundCt == 1) {
            document.getElementById("searchField").value = document.getElementById("popups").firstChild.innerHTML;
            document.getElementById("popups").innerHTML = "";
        }
    }
}

function makeChoice(evt) {
    var thisDiv = (evt) ? evt.target : window.event.srcElement;
    document.getElementById("searchField").value = thisDiv.innerHTML;
    document.getElementById("popups").innerHTML = "";
}

3.  script.css

body, #searchField {
    font: 1.2em arial, helvetica, sans-serif;
}

#popups {
    position: absolute;
}

#searchField.error {
    background-color: #FC0;
}

div.suggestions {
    background-color: #FFF;
    padding: 2px 6px;
    border: 1px solid #000;
}

div.suggestions:hover {
    background-color: #69F;
}


4. us-states.xml

<?xml version="1.0"?>
<choices xml:lang="EN">
    <item>
        <label>Alabama</label>
        <value>AL</value>
    </item>
    <item>
        <label>Alaska</label>
        <value>AK</value>
    </item>
    <item>
        <label>Arizona</label>
        <value>AZ</value>
    </item>
    <item>
        <label>Arkansas</label>
        <value>AR</value>
    </item>
    <item>
        <label>California</label>
        <value>CA</value>
    </item>
    <item>
        <label>Colorado</label>
        <value>CO</value>
    </item>
    <item>
        <label>Connecticut</label>
        <value>CT</value>
    </item>
    <item>
        <label>Delaware</label>
        <value>DE</value>
    </item>
    <item>
        <label>Florida</label>
        <value>FL</value>
    </item>
    <item>
        <label>Georgia</label>
        <value>GA</value>
    </item>
    <item>
        <label>Hawaii</label>
        <value>HI</value>
    </item>
    <item>
        <label>Idaho</label>
        <value>ID</value>
    </item>
    <item>
        <label>Illinois</label>
        <value>IL</value>
    </item>
    <item>
        <label>Indiana</label>
        <value>IN</value>
    </item>
    <item>
        <label>Iowa</label>
        <value>IA</value>
    </item>
    <item>
        <label>Kansas</label>
        <value>KS</value>
    </item>
    <item>
        <label>Kentucky</label>
        <value>KY</value>
    </item>
    <item>
        <label>Louisiana</label>
        <value>LA</value>
    </item>
    <item>
        <label>Maine</label>
        <value>ME</value>
    </item>
    <item>
        <label>Maryland</label>
        <value>MD</value>
    </item>
    <item>
        <label>Massachusetts</label>
        <value>MA</value>
    </item>
    <item>
        <label>Michigan</label>
        <value>MI</value>
    </item>
    <item>
        <label>Minnesota</label>
        <value>MN</value>
    </item>
    <item>
        <label>Mississippi</label>
        <value>MS</value>
    </item>
    <item>
        <label>Missouri</label>
        <value>MO</value>
    </item>
    <item>
        <label>Montana</label>
        <value>MT</value>
    </item>
    <item>
        <label>Nebraska</label>
        <value>NE</value>
    </item>
    <item>
        <label>Nevada</label>
        <value>NV</value>
    </item>
    <item>
        <label>New Hampshire</label>
        <value>NH</value>
    </item>
    <item>
        <label>New Jersey</label>
        <value>NJ</value>
    </item>
    <item>
        <label>New Mexico</label>
        <value>NM</value>
    </item>
    <item>
        <label>New York</label>
        <value>NY</value>
    </item>
    <item>
        <label>North Carolina</label>
        <value>NC</value>
    </item>
    <item>
        <label>North Dakota</label>
        <value>ND</value>
    </item>
    <item>
        <label>Ohio</label>
        <value>OH</value>
    </item>
    <item>
        <label>Oklahoma</label>
        <value>OK</value>
    </item>
    <item>
        <label>Oregon</label>
        <value>OR</value>
    </item>
    <item>
        <label>Pennsylvania</label>
        <value>PA</value>
    </item>
    <item>
        <label>Rhode Island</label>
        <value>RI</value>
    </item>
    <item>
        <label>South Carolina</label>
        <value>SC</value>
    </item>
    <item>
        <label>South Dakota</label>
        <value>SD</value>
    </item>
    <item>
        <label>Tennessee</label>
        <value>TN</value>
    </item>
    <item>
        <label>Texas</label>
        <value>TX</value>
    </item>
    <item>
        <label>Utah</label>
        <value>UT</value>
    </item>
    <item>
        <label>Vermont</label>
        <value>VT</value>
    </item>
    <item>
        <label>Virginia</label>
        <value>VA</value>
    </item>
    <item>
        <label>Washington</label>
        <value>WA</value>
    </item>
    <item>
        <label>West Virginia</label>
        <value>WV</value>
    </item>
    <item>
        <label>Wisconsin</label>
        <value>WI</value>
    </item>
    <item>
        <label>Wyoming</label>
        <value>WY</value>
    </item>
</choices>




reference : lynda.com


No comments:

Post a Comment