各位大大好:
小弟PHP新手,如果問題太蠢請見諒,目前想利用javascript 來動態增加欄位，在欄位輸入時候可以到資料庫搜尋資讓使用者在輸入的時候關鍵字提醒，目前遇到困難是再動態新增第一個欄位之後就無法關鍵字提醒...求大大堤點或關鍵字讓小弟可以研究。
HTML 碼如下
<html>
<head>
</head>
<body>
<form method="post" action="001.php">
<table>
<tr>
<td>Single selection</td>
<td><input name="text" type='text' id='autocomplete'></td>
</tr>
<input type="button" value="增加text" onclick="add_text()" />
<span id="text_zone"> </span>
<tr>
<td>Selected User id</td>
<td><input name="id_key" type='text' id='selectuser_id'/></td>
</tr>
<tr>
<td>Multiple Selection</td>
<td><input type='text' id='multi_autocomplete' ></td>
</tr>
<td>Selected User ids</td>
<td><input type='text' id='selectuser_ids' /></td>
</tr>
</table>
<button name="action" class="btn btn-primary" type="submit" onclick="return confirm('您確定要異動嗎？');return false;" value="insert">存檔</button>
</form>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../resources/js/inbox.js"></script>
<script src="../resources/js/boxslect.js"></script>
</body>
</html>
javascript 程式碼如下
function add_text(){
text = document.createElement('input')
text.setAttribute('name', 'text[]')
text.setAttribute('id', 'text')
text.setAttribute('placeholder', '商品單位')
br = document.createElement('br')
document.getElementById('text_zone').appendChild(br)
document.getElementById('text_zone').appendChild(text)
$( "#text" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "fetchData.php",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
// Set selection
$('#text').val(ui.item.label); // display the selected text
$('#selectuser_id').val(ui.item.value); // save selected id to input
return false;
}
});
}
fetchData.php
<?
require("../databass2.php");
if(isset($_POST['search'])){//isset 檢查是否有值進入
$search = '%'.$_POST['search'].'%'; //
$data_sql = $db->prepare("SELECT * FROM users WHERE name like ?");
$data_sql->execute(array($search));
while($row = $data_sql->fetch()){
$response[] = array("value"=>$row['id'],"label"=>$row['name']);
}
echo json_encode($response);
}
exit;?>
後來將JAVASCRIPT做修改，結果動態新增的第一個就不會提示了。
<script>
var countMin = 0;
var countMax = 5;
var commonName = "test";
var count = countMin;
function addField() {
if(count == countMax)
{
alert("最多"+countMax+"個欄位");
}
else{
document.getElementById("fieldSpace").innerHTML += "<div>" + (++count) + '<input type="text" id="' + commonName + count + '"></div>';
}
}
function delField() {
if (count > countMin) {
var fs = document.getElementById("fieldSpace");
fs.removeChild(fs.lastChild);
count--;
} else {
alert("無新增欄位可以刪除");
}
}
</script>
<script>
$( function (){
$( "#test" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "fetchData.php",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
// Set selection
$('#test').val(ui.item.label); // display the selected text
$('#selectuser_id').val(ui.item.value); // save selected id to input
return false;
}
});
}
</script>
已邀請的邦友 {{ invite_list.length }}/5
動態新增最好不要用ID,
Html只允許一個ID,
如果你命名了多個同樣的,
基本上只會有一個是有效的,
最好用不同的ID,
(如1,2,3,4之類的)
通常多個控制項要用同一個函式,
我比較傾向用class來處理,
然後用ID來區分是哪一個控制項,
再針對該控制項觸發事件.
其實看完你的程式碼確實是會搖頭。
我這裏就將你的程式碼的問題先抓出來後，你再試著去研究改看看吧。
1.多多學一下jquery的應用，你都用jquery了。為何還可以看到createElement這樣的javascript用法。
2.記得一件事，事件的綁定。只會作用到目前已存在的元件上，新生成的元件並不會自動綁定事件。
3.多重應用控制，不要利用id來做綁定事件。除非你可以不同名。因為html有id同名限制。這可能才是你主要的問題。
以下是給你的建議，你即然都已經使用了jquery了。將以下的關鍵字查一下
each、append、on
這幾個會對你想要的方式都有幫助。去查一下吧。有問題在提出。
我現在的原則，看了搖頭的就不看。
人家有說了是新手，就大致上教一下人家就好了。
至少比某a君好多了，一下子新手一下子老手。還問個好像很專業的問題，實際確是連問都不需要問的超新手問題。
離題了
感謝兩位大大願意堤點小弟,小弟目前依照浩瀚大的關鍵字修改了一下自己的CODE
如下
<script>
$(':button').on('click', function(){//綁定按鈕
var item = '<input type="text" class="name" id="text" value="">';
$('.new').append(item);//新增一個空格
$('.new').find('input[type=text]:last').autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "fetchData.php",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
});
});
</script>
更正,目前更改成這樣已經可以正常運作,但不知道是否為正確的方式,感謝所有回復幫忙提點的大大門
iThome鐵人賽
看影片追技術