TUTORIAL JAVASCRIPT AUTOCOMPLETE COMBOBOX

1. combobox.html 
   
   
   

   <script src="combobox.js"><!--mce:0--></script>
   <script src="ardi-ajax.js"><!--mce:1--></script>
   <h2>Auto Complete Combobox</h2>
   <select>
   <option></option>
   <option value="indonesia">Indonesia</option>
   <option value="malaysia">Malaysia</option>
   <option value="singapore">Singapore</option>
   </select>
   

   
   
   
   
   
   
   
2. combobox.js
   
   
   

   function autoCombobox(value)
   {
   //Membuat URl yg disisipkan parameter yang dibutuhkan
   var url="combobox.php"
   url=url+"?jenis="+value
   url=url+"&sid="+Math.random()
   
   ajax = new ardiAjax();
   ajax.get(url,
   function(data)
   {
   //Memasukkan hasil response ke textBox "comboBoxArea" di file HTML
   document.getElementById("comboBoxArea").innerHTML=data;
   }
   );
   }

   
   
   
   
   
   
3. combobox.php
   
   
   
   

   Array("Indonesia prop A", "Indonesia prop B", "Indonesia prop C", 

   "Indonesia prop D"), 'malaysia' => Array("Malaysia prop A",  

   "Malaysia prop B", "Malaysia prop C"), 'singapore' => 

   Array("Singapore prop A", "Singapore prop B" , 

   "Singapore prop C", "Sigapore prop D")
   );
   
   $arr;
   if(isset($_GET['jenis']))
   {
   $arr = $data[$_GET['jenis']];
   }
   ?>
   <select>
   <option></option>
   </select>

   
   
   
4. ardi-ajax.js
   
   
   
   

   function ardiAjax()
   {
   this.xmlHttp;
   
   /**
   * @param1 : url = Alamat beserta parameter GET yang akan di parsing
   * @param2 : successFunc = Fungsi jika success. Penggunaan : 

   successFunc(dataResponse)
   */
   this.get = function(url, successFunc)
   {
   
   //Membuat XmlHttpObject
   this.xmlHttp = this.GetXmlHttpObject();
   if (this.xmlHttp==null)
   {
   alert ("Browser tidak support HTTP Request");
   return;
   }
   
   //fungsi listener
   this.xmlHttp.onreadystatechange=function()
   {
   //Jika requestnya menerima reponse "complete" yg artinya sukses
   if (this.readyState==4 || this.readyState=="complete")
   {
   successFunc(this.responseText);
   }
   };
   
   //mengirim secara get
   this.xmlHttp.open("GET",url,true);
   this.xmlHttp.send(null);
   };
   
   //Membuat XmlHttpObject untuk berbagai browser
   this.GetXmlHttpObject = function()
   {
   var xmlhttp=null;
   
   try
   {
   // Firefox, Opera 8.0+, Safari
   xmlhttp=new XMLHttpRequest();
   }
   catch (e)
   {
   // Internet Explorer
   try
   {
   xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
   {
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   }
   return xmlhttp;
   };
   
   }