自動完成兩個字段什麼都沒有發生

我試圖在2個文本框上實現自動完成文本框，當它們中的一個被選中時，值被放置在該文本框中。我想我應該能夠用一個例子更容易地解釋。自動完成兩個字段什麼都沒有發生

我有2個文本框，他們有從同一個表/數據庫中獲取的自動完成。例如，我有一個列foo，它包含foo和foo2以及包含bar和bar2的列欄。所以這個文本框有任何列富有和其他有任何列欄。當我從textbox1中選擇foo時，textbox2會有欄。當我從textbox2中選擇bar2時，textbox1將具有foo2。

我希望是有道理的，我有以下的javascript

<script> 
$('#school_id').autocomplete({ 
source: function(request, response) { 
    $.ajax({ 
     url : 'ajaxi.php', 
     dataType: "json", 
     method: 'post', 
     data: { 
      name_startsWith: request.term, 
      type: 'school_table', 
      row_num : 1 
     }, 
     success: function(data) { 
      response($.map(data, function(item) { 
       var code = item.split("|"); 
       return { 
        label: code[0], 
        value: code[0], 
        data : item 
       } 
      })); 
     } 
    }); 
}, 
autoFocus: true,    
minLength: 0, 
select: function(event, ui) { 
    var names = ui.item.data.split("|");       
    $('#school_name').val(names[1]); 
}    
}); 
</script>

HTML

<body> 
<form id='students' method='post' name='students' action='test.php'> 
<input class="form-control" type='text' id='school_id' name='school_id'/> 
<input class="form-control" type='text' id='school_name' name='school_name'/> 
</form> 
</body>

腳本來源

<link rel="stylesheet" type="text/css" href="css/main.css" /> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

和ajaxi.php文件

if($_POST['type'] == 'school_table'){ 
$row_num = $_POST['row_num']; 
$name = $_POST['name_startsWith']; 
$query = "SELECT school_id, school_name FROM school where school_id LIKE '".$name."%'"; 
$result = mysqli_query($con, $query); 
$data = array(); 
while ($row = mysqli_fetch_assoc($result)) { 
    $name = $row['school_id'].'|'.$row['school_name'].'|'.$row_num; 
    array_push($data, $name); 
} 
echo json_encode($data);

當我嘗試鍵入內容時，沒有任何反應。感謝您的幫助。

我從here得到了這個。我試着瞭解每個人做了什麼，但我仍然無法使其工作。

來源

2016-09-16 ThisIsABird

我只注意到school_id_1在javascript在文本框（school_id）中是不同的，所以我改變了這些。仍然不起作用，所以我恢復了他們。 – ThisIsABird

第1步：請檢查所有必要的腳本加載HTML文件...

第2步：檢查是否有任何JavaScript錯誤都存在，如果是，請清除這些JavaScript錯誤...

第3步：請您的HTML文件的底部添加此腳本...

<script> 
     $(document).ready(function(){ 
      $('#school_id').autocomplete({ 
       source: function(request, response) { 
        $.ajax({ 
         url : 'ajaxi.php', 
         dataType: "json", 
         method: 'post', 
         data: { 
          name_startsWith: request.term, 
          type: 'school_table', 
          row_num : 1 
         }, 
         success: function(data) { 
          response($.map(data, function(item) { 
           var code = item.split("|"); 
           return { 
            label: code[0], 
            value: code[0], 
            data : item 
           } 
          })); 
         } 
        }); 
       }, 
       autoFocus: true,    
       minLength: 0, 
       select: function(event, ui) { 
        var names = ui.item.data.split("|");       
        $('#school_name').val(names[1]); 
       }    
      }); 
     }); 

    </script>

第4步：接下來要檢查你輸入的東西它使AJAX調用ajaxi.php文件..

第5步：如果是檢查你Ajax調用的響應...

我檢查你的粘貼腳本樣樣精..

來源

2016-09-18 07:14:19 muni

自動完成兩個字段什麼都沒有發生

回答

相關問題