ต้องการทำ Autocomplete Ajax แบบหลายๆ Input Tag ทำอย่างไรหรอครับ ??

<form id="form1" name="form1" method="post" action="">
   <?php
    for ($i = 1; $i <= 10 ; $i++) {
        ?>
        <p>
          <label for=""><?php echo $i."."; ?></label>
          <input name="show_province" type="text" id="show_province<?php echo $i; ?>" size="50" />
          <input name="h_province_id" type="hidden" id="h_province_id<?php echo $i; ?>" value="" />
          <br>
          <hr>
          ID:
          <input type="text" name="province_id" id="province_id<?php echo $i; ?>">
          <br>
          Name:
          <input type="text" name="province_name_th" id="province_name_th<?php echo $i; ?>">
          <br><br><hr />
        </p>
        <?php
    }
   ?>
 </form>

<script type="text/javascript">
 var c = 1;
 for (var i = 1; i <= 10; i++) {
   function make_autocom(autoObj,showObj){
       var mkAutoObj = autoObj;
       var mkSerValObj = showObj;
       new Autocomplete(mkAutoObj, function() {
           this.setValue = function(id) {
               document.getElementById(mkSerValObj).value = id;
               // ถ้ามี id ที่ได้จากการเลือกใน autocomplete
               if(id != ""){
                   // ส่งค่าไปคิวรี่เพื่อเรียกข้อมูลเพิ่มเติมที่ต้องการ โดยใช้ ajax
                   $.post("g_fulldata.php",{id:id},function(data){
                       if(data != null && data.length>0){ // ถ้ามีข้อมูล
                           // นำข้อมูลไปแสดงใน textbox ที่่เตรียมไว้
                           $("#province_id"+c).val(data[0].id);
                           $("#province_name_th"+c).val(data[0].name_th);
                          // $("#province_name_en").val(data[0].name_en);
                       }
                   });
               }else{
                   // ล้างค่ากรณีไม่มีการส่งค่า id ไปหรือไม่มีการเลือกจาก autocomplete
                   $("#province_id"+c).val("");
                   $("#province_name_th"+c).val("");
                   //$("#province_name_en").val("");
               }
           }
           if ( this.isModified )
               this.setValue("");
           if ( this.value.length < 1 && this.isNotClick )
               return ;
           return "gdata.php?q=" + encodeURIComponent(this.value);
       });
   }
   // การใช้งาน
   // make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
   make_autocom("show_province"+c,"h_province_id"+c);
   c = c + 1;
 }
 </script>

ไฟล์ dbconnect.php

<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */ 
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}

ไฟล์ get_province_json.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("inc/dbconnect.php");

$json_data = array();

$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="tbl_provinces"; // ตารางที่ต้องการค้นหา
$find_field="province_name"; // ฟิลที่ต้องการค้นหา
if(isset($_GET['term']) && $_GET['term']!=""){	
    $keyword = trim($_GET["term"]);
    $sql = "SELECT * FROM $table_db 
    WHERE  LOCATE('$keyword', $find_field) > 0 
    ORDER BY LOCATE('$keyword', $find_field), $find_field LIMIT $pagesize";
}else{
    $sql = "SELECT * FROM $table_db  WHERE 1 LIMIT $pagesize";      
}
// หากข้อมูลมีจำนวนมาก ให้เปลี่ยนตรง * ให้เป็นเฉพาะฟิลด์ที่จะใช้งานเช่น
// SELECT province_name,province_id FROM $table_db   เป็นต้น เพื่อให้การทำงานเร็วขึ้น

$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "value" => $row['province_name'],
            "label" => $row['province_name'],
			"id" => $row['province_id']   
			// เพิ่ม key ของ array ได้ตามต้องการ แต่ต้องมี value กับ label ในที่นี้เพิ่ม id เข้ามา
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

ไฟล์โค้ดตัวอย่าง

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />     
	<style type="text/css">
        /*   css ส่วนของรายการที่แสดง  */ 
        .ui-autocomplete {  
            padding-right: 5px;
            max-height:200px !important;
            overflow: auto !important;
        }  
    </style>
</head>
<body>

<br>
<br>
<div class="container">
	<div class="form-group row">
    	<div class="col-xs-6">
    	<input type="text" class="form-control typeahead" name="myprovince1" id="myprovince1" value="" />        
        </div>
    </div>
	<div class="form-group row">
    	<div class="col-xs-6">
    	<input type="text" class="form-control typeahead" name="myprovince2" id="myprovince2" value="" />        
        </div>
    </div>
	<div class="form-group row">
    	<div class="col-xs-6">
    	<input type="text" class="form-control typeahead" name="myprovince3" id="myprovince3" value="" />        
        </div>
    </div>
	<div class="form-group row">
    	<div class="col-xs-6">
    	<input type="text" class="form-control typeahead" name="myprovince4" id="myprovince4" value="" />        
        </div>
    </div>            
</div>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	
    $( ".typeahead" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
        minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
        source: "get_province_json.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
        open:function(){ // เมื่อมีการแสดงรายการ autocomplete

        },
        select: function( event, ui ) {
			// สามารถนำค่า ที่เลือก ไปใช้งานผ่านการอ้างอิ ui.item.xxxx โดย xxx คือ key ที่เราสร้างในไฟล์ json
            console.log(ui.item.id);
			console.log(ui.item.label);
			console.log(ui.item.value);
        }
    });		
	
});
</script>
</body>
</html>

ตัวอย่างรูปผลลัพธ์

 

ตัวอย่าง

	<div class="form-group row">
    	<div class="col-xs-3">
    	<input type="text" class="form-control typeahead" data-obj1="myprovince2_id" data-obj2="myprovince2_name" 
        name="myprovince2" id="myprovince2" value="" />        
        </div>
    	<div class="col-xs-1">
    	<input type="text" class="form-control" name="myprovince2_id" id="myprovince2_id" value="" />        
        </div>     
    	<div class="col-xs-2">
    	<input type="text" class="form-control" name="myprovince2_name" id="myprovince2_name" value="" />        
        </div>                 
    </div>

โค้ดตัวอย่างแบบเต็ม

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />     
	<style type="text/css">
        /*   css ส่วนของรายการที่แสดง  */ 
        .ui-autocomplete {  
            padding-right: 5px;
            max-height:200px !important;
            overflow: auto !important;
        }  
    </style>
</head>
<body>

<br>
<br>
<div class="container">
	<div class="form-group row">
    	<div class="col-xs-3">
    	<input type="text" class="form-control typeahead" data-obj1="myprovince1_id" data-obj1="myprovince1_name"   
        name="myprovince1" id="myprovince1" value="" />        
        </div>
    	<div class="col-xs-1">
    	<input type="text" class="form-control" name="myprovince1_id" id="myprovince1_id" value="" />        
        </div>           
    </div>
	<div class="form-group row">
    	<div class="col-xs-3">
    	<input type="text" class="form-control typeahead" data-obj1="myprovince2_id" data-obj2="myprovince2_name" 
        name="myprovince2" id="myprovince2" value="" />        
        </div>
    	<div class="col-xs-1">
    	<input type="text" class="form-control" name="myprovince2_id" id="myprovince2_id" value="" />        
        </div>     
    	<div class="col-xs-2">
    	<input type="text" class="form-control" name="myprovince2_name" id="myprovince2_name" value="" />        
        </div>                 
    </div>
	<div class="form-group row">
    	<div class="col-xs-3">
    	<input type="text" class="form-control typeahead" data-obj1="myprovince3_id" data-obj2="myprovince3_name" 
        name="myprovince3" id="myprovince3" value="" />        
        </div>
    	<div class="col-xs-1">
    	<input type="text" class="form-control" name="myprovince3_id" id="myprovince3_id" value="" />        
        </div>     
    	<div class="col-xs-2">
    	<input type="text" class="form-control" name="myprovince3_name" id="myprovince3_name" value="" />        
        </div>                 
    </div>     
</div>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	
    $( ".typeahead" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
        minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
        source: "get_province_json.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
        open:function(){ // เมื่อมีการแสดงรายการ autocomplete
			obj1 = $(this).data("obj1"); // เก็บค่า id ของ object เป้าหมายแรก
			obj2 = $(this).data("obj2"); // เก็บค่า id ของ object เป้าหมายที่สอง
        },
        select: function( event, ui ) {
			// สามารถนำค่า ที่เลือก ไปใช้งานผ่านการอ้างอิ ui.item.xxxx โดย xxx คือ key ที่เราสร้างในไฟล์ json
            console.log(ui.item.id);
			console.log(ui.item.label);
			console.log(ui.item.value);
			$("#"+obj1).val(ui.item.id); //นำค่ามาแสดง
			$("#"+obj2).val(ui.item.value); //นำค่ามาแสดง
        }
    });		
	
});
</script>
</body>
</html>

ตัวอย่างผลลัพธ์