jQuery Autocomplete dengan XML Data Source

by | Jun 4, 2018 | CSS, HTML, Javascript, jQuery | 0 comments

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita  akan membahas tentang jQuery Autocomplete dengan XML Data Source.  Fitur Autocomplete adalah mekanisme typeahead untuk menunjukkan saran masukan kepada pengguna. Ini adalah fitur UI / UX yang umum dalam aplikasi untuk secara intuitif membantu pengguna dengan input. Sebagai contoh, dalam sistem pesan internal, akan nyaman jika bidang To-Address adalah field typeahead. Dengan mengetik di bidang ini, daftar saran autocomplete yang dapat dipilih dapat ditampilkan kepada pengguna. Google menggunakan saran kata kunci Google Penelusuran yang sangat baik ini.

Ini berbeda dengan dropdown bergantung. Sebelumnya, kami telah melihat bagaimana menampilkan saran autocomplete dengan mengumpulkan data dari database menggunakan jQuery AJAX. Saya memanggil fungsi AJAX jQuery untuk memicu permintaan server untuk mendapatkan hasil basis data berdasarkan data yang diketik pada bidang autocomplete. Dalam contoh ini, saya telah menerapkan jQuery UI autocomplete untuk membaca data dari sumber daya file XML. File XML sumber berisi daftar nama negara yang ditetapkan sebagai sumber saat menginisialisasi fungsi pustaka lengkapi-otomatis jQuery UI.
Target HTML Melengkapi Otomatis

Ini adalah halaman arahan di mana bidang input autocomplete ditampilkan. ID bidang ini disebut di pemilih jquery saat menginisialisasi fungsi autocomplete. Dengan mengetik di bidang ini fungsi autocomplete jQuery dipanggil untuk menunjukkan kotak saran kepada pengguna. Kami telah melihat contoh untuk membuat antarmuka pencarian lokasi Google dengan fitur autocomplete.

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
</head>
<body>
<div class="ui-widget">
  <label for="search-keyword">Tags: </label>
  <input id="search-keyword">
</div>
</body>
</html>

jQuery Autocomplete untuk Membaca XML melalui AJAX

Pada saat penekanan tombol bidang autocomplete, fungsi autocomplete jQuery dipanggil untuk membaca data XML dan menampilkan kotak saran dengan opsi terkait. Nama file XML ditentukan untuk panggilan AJAX untuk membaca daftar nama negara ke dalam array. Data array ini diatur ke parameter sumber dari fungsi autocomplete. Dari sumber data ini, opsi saran autocomplete ditampilkan.

<script>
  var countryResult = [];
  $(document).on('keyup' , '#search-keyword'  ,function(){
    var keyvalue = $("#search-keyword").val();

    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            countryResult = [];
            myFunction(this , keyvalue);
        }
    };
    xhttp.open("GET", "country.xml", true);
    xhttp.send();
  });

  function myFunction(xml , key) {
      var x, i, xmlDoc , key;
      xmlDoc = xml.responseXML;
      x = xmlDoc.getElementsByTagName("country");
      var counter = 0;
      for (i = 0; i < x.length; i++) {
          var value = x[i].childNodes[0].nodeValue.trim();
          var pattern = value.substring(0 , key.length);
             if(key.toUpperCase() == pattern.toUpperCase() && counter < 10){
               countryResult.push(value);
               counter++;
             }
      }
       $("#search-keyword").autocomplete({
            source: countryResult
          });
  }



  $( function() {
    $( "#search-keyword" ).autocomplete({
      source:countryResult
    });
  });
  </script>

Sumber Data File XML – Daftar Negara

Ini adalah data file XML yang berisi daftar nama negara.

<countries>
<country>Albania</country>
<country>Algeria</country>
<country>American Samoa</country>
<country>Andorra</country>
<country>Angola</country>
<country>Anguilla</country>
<country>Afghanistan</country>
<country>Antarctica</country>
<country>Antigua And Barbuda</country>
<country>Argentina</country>
<country>Armenia</country>
<country>Aruba</country>
<country>Australia</country>
<country>Austria</country>
<country>Azerbaijan</country>
<country>Bahamas</country>
<country>Bahrain</country>
<country>Bangladesh</country>
<country>Barbados</country>
<country>Belarus</country>
<country>Belgium</country>
<country>Belize</country>
<country>Benin</country>
<country>Bermuda</country>
<country>Bhutan</country>
<country>Bolivia</country>
<country>Bosnia And Herzegovina</country>
<country>Botswana</country>
<country>Bouvet Island</country>
<country>Brazil</country>
<country>British Indian Ocean Territory</country>
<country>Brunei Darussalam</country>
<country>Bulgaria</country>
<country>Burkina Faso</country>
<country>Burundi</country>
<country>Cambodia</country>
<country>Cameroon</country>
<country>Canada</country>
<country>Cape Verde</country>
<country>Cayman Islands</country>
<country>Central African Republic</country>
<country>Chad</country>
<country>Chile</country>
<country>China</country>
<country>Christmas Island</country>
<country>Cocos (Keeling) Islands</country>
<country>Colombia</country>
<country>Comoros</country>
<country>Congo</country>
<country>Cook Islands</country>
<country>Costa Rica</country>
<country>Cote D'Ivoire</country>
<country>Croatia (Local Name: Hrvatska)</country>
<country>Cuba</country>
<country>Cyprus</country>
<country>Czech Republic</country>
<country>Denmark</country>
<country>Djibouti</country>
<country>Dominica</country>
<country>Dominican Republic</country>
<country>Ecuador</country>
<country>Egypt</country>
<country>El Salvador</country>
<country>Equatorial Guinea</country>
<country>Eritrea</country>
<country>Estonia</country>
<country>Ethiopia</country>
<country>Falkland Islands (Malvinas)</country>
<country>Faroe Islands</country>
<country>Fiji</country>
<country>Finland</country>
<country>France</country>
<country>France, Metropolitan</country>
<country>French Guiana</country>
<country>French Polynesia</country>
<country>French Southern Territories</country>
<country>Gabon</country>
<country>Gambia</country>
<country>Georgia</country>
<country>Germany</country>
<country>Ghana</country>
<country>Gibraltar</country>
<country>Greece</country>
<country>Greenland</country>
<country>Grenada</country>
<country>Guadeloupe</country>
<country>Guam</country>
<country>Guatemala</country>
<country>Guinea</country>
<country>Guinea-Bissau</country>
<country>Guyana</country>
<country>Haiti</country>
<country>Heard Island  Mcdonald Islands</country>
<country>Honduras</country>
<country>Hong Kong</country>
<country>Hungary</country>
<country>Iceland</country>
<country>India</country>
<country>Indonesia</country>
<country>Iran, Islamic Republic Of</country>
<country>Iraq</country>
<country>Ireland</country>
<country>Israel</country>
<country>Italy</country>
<country>Jamaica</country>
<country>Japan</country>
<country>Jordan</country>
<country>Kazakhstan</country>
<country>Kenya</country>
<country>Kiribati</country>
<country>Korea, Democratic People'S Republic Of</country>
<country>Korea, Republic Of</country>
<country>Kuwait</country>
<country>Kyrgyzstan</country>
<country>Lao People'S Democratic Republic</country>
<country>Latvia</country>
<country>Lebanon</country>
<country>Lesotho</country>
<country>Liberia</country>
<country>Libyan Arab Jamahiriya</country>
<country>Liechtenstein</country>
<country>Lithuania</country>
<country>Luxembourg</country>
<country>Macau</country>
<country>Macedonia, The Former Yugoslav Republic Of</country>
<country>Madagascar</country>
<country>Malawi</country>
<country>Malaysia</country>
<country>Maldives</country>
<country>Mali</country>
<country>Malta</country>
<country>Marshall Islands</country>
<country>Martinique</country>
<country>Mauritania</country>
<country>Mauritius</country>
<country>Mayotte</country>
<country>Mexico</country>
<country>Micronesia, Federated States Of</country>
<country>Moldova, Republic Of</country>
<country>Monaco</country>
<country>Mongolia</country>
<country>Montserrat</country>
<country>Morocco</country>
<country>Mozambique</country>
<country>Myanmar</country>
<country>Namibia</country>
<country>Nauru</country>
<country>Nepal</country>
<country>Netherlands</country>
<country>Netherlands Antilles</country>
<country>New Caledonia</country>
<country>New Zealand</country>
<country>Nicaragua</country>
<country>Niger</country>
<country>Nigeria</country>
<country>Niue</country>
<country>Norfolk Island</country>
<country>Northern Mariana Islands</country>
<country>Norway</country>
<country>Oman</country>
<country>Pakistan</country>
<country>Palau</country>
<country>Panama</country>
<country>Papua New Guinea</country>
<country>Paraguay</country>
<country>Peru</country>
<country>Philippines</country>
<country>Pitcairn</country>
<country>Poland</country>
<country>Portugal</country>
<country>Puerto Rico</country>
<country>Qatar</country>
<country>Reunion</country>
<country>Romania</country>
<country>Russian Federation</country>
<country>Rwanda</country>
<country>Saint Helena</country>
<country>Saint Kitts And Nevis</country>
<country>Saint Lucia</country>
<country>Saint Pierre And Miquelon</country>
<country>Saint Vincent And The Grenadines</country>
<country>Samoa</country>
<country>San Marino</country>
<country>Sao Tome And Principe</country>
<country>Saudi Arabia</country>
<country>Senegal</country>
<country>Seychelles</country>
<country>Sierra Leone</country>
<country>Singapore</country>
<country>Slovakia (Slovak Republic)</country>
<country>Slovenia</country>
<country>Solomon Islands</country>
<country>Somalia</country>
<country>South Africa</country>
<country>Spain</country>
<country>Sri Lanka</country>
<country>Sudan</country>
<country>Suriname</country>
<country>Svalbard And Jan Mayen Islands</country>
<country>Swaziland</country>
<country>Sweden</country>
<country>Switzerland</country>
<country>Syrian Arab Republic</country>
<country>Taiwan, Province Of China</country>
<country>Tajikistan</country>
<country>Tanzania, United Republic Of</country>
<country>Thailand</country>
<country>Togo</country>
<country>Tokelau</country>
<country>Tonga</country>
<country>Trinidad And Tobago</country>
<country>Tunisia</country>
<country>Turkey</country>
<country>Turkmenistan</country>
<country>Turks And Caicos Islands</country>
<country>Tuvalu</country>
<country>Uganda</country>
<country>Ukraine</country>
<country>United Arab Emirates</country>
<country>United Kingdom</country>
<country>United States</country>
<country>United States Minor Outlying Islands</country>
<country>Uruguay</country>
<country>Uzbekistan</country>
<country>Vanuatu</country>
<country>Vatican City State (Holy See)</country>
<country>Venezuela</country>
<country>Viet Nam</country>
<country>Virgin Islands (British)</country>
<country>Virgin Islands (U.S.)</country>
<country>Wallis And Futuna Islands</country>
<country>Western Sahara</country>
<country>Yemen</country>
<country>Yugoslavia</country>
<country>Zaire</country>
<country>Zambia</country>
<country>Zimbabwe</country>
</countries>

jQuery Autocomplete dengan Sumber Data XML – Output

Screenshot ini menunjukkan output dari output autocomplete UI jQuery dengan membaca data dari sumber XML melalui AJAX.

jQuery Autocomplete dengan Sumber Data XML