我有一个工作代码,如果我最多可以添加10个输入字段,那么我还需要将这些输入字段与ajax自动完成功能结合在一起,但是,只有第一个输入字段可以工作。
这是html代码:
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Respondent <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="search-box" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text">
<div id="suggesstion-box"></div>
</div>
</div>
<div class = 'd'></div>
添加动态输入字段:
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".d"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12">Respondent <span class="required">*</span></label><div class="col-md-6 col-sm-6 col-xs-12"><input id="search_resp1" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text"/> <div id="resp1"></div> </div><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
});
});
</script>
AJAX代码:
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "../search/docrequest_search.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#search-box").css("background","#FFF");
},
success: function(data){
if (data == 0) {
$("#suggesstion-box").html('<ul style="width: 550px; position: absolute; top: 100%; z-index: 10;" id="country-list"><li>No match found.</li></ul>');
}
else {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
}
});
});
});
$(document).click( function(){
$('#suggesstion-box').hide();
});
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
AJAX的外部PHP代码:
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM person WHERE (firstName like '" . $_POST["keyword"] . "%' OR lastName like '" . $_POST["keyword"] . "%') AND residentOrNot = 'Yes' AND income != 0";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="country-list" style = "width: 550px; position: absolute; top: 100%; margin: 0; z-index: 10; padding: 0;">
<?php
foreach($result as $country) {
?>
<li onClick="selectCountry('<?php echo $country["idPerson"]?>');">Name: <?php echo $country["firstName"].' '.$country["middleName"].' '.$country["lastName"]; ?><br> ID: <?php echo $country["idPerson"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>
如何为添加的每个输入字段使用AJAX进行自动完成?我应该在代码中添加什么?请帮我。非常感谢。
参考方案
您永远不会在动态输入字段上添加任何“ keyup”侦听器。
例如,您可以将ajax帖子包装到一个名为autoComplete的函数中。
然后,当您创建元素时,只需在keyup事件上调用该函数。
编辑:
另外,我注意到您添加了以下硬ID:
<input id="search_resp1"
我认为应该是这样
<input id="search_resp'+ x +'"
编辑2:
添加动态输入字段:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".d"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="item form-group">'
+'<label class="control-label col-md-3 col-sm-3 col-xs-12">'
+' Respondent <span class="required">*</span>'
+'</label>'
+'<div class="col-md-6 col-sm-6 col-xs-12">'
+' <input id="search_resp_'+x+'" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text"/>'
+' <div id="resp_'+x+'"></div> '
+'</div>'
+'<a href="#" class="remove_field">Remove</a>'
+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
// The same way you added the above click event listener in order to
// remove the textbox, you add a keyup event listener on the new input
// and call autoComplete (which contains your ajax request)
$("#search_resp_"+x).keyup(
function(){
autoComplete();
});
});
AJAX代码:
function autoComplete(){
$.ajax({
type: "POST",
url: "../search/docrequest_search.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$(this).css("background","#FFF");
},
success: function(data){
if (data == 0) {
$(this).next().html('<ul style="width: 550px; position: absolute; top: 100%; z-index: 10;" id="country-list"><li>No match found.</li></ul>');
}
else {
$(this).next().show();
$(this).next().html(data);
$(this).css("background","#FFF");
}
// $(this) should be you textbox
// and $(this).next() will return the div next to your textbox
// which is, I guess, the div used for displaying the results
}
});
}
$(document).ready(function(){
$("#search-box").keyup(function(){
autoComplete();
});
});
您可能希望在单击外部时将用于显示结果的div隐藏。
$(document).click( function(){
$('#suggesstion-box').hide();
});
这只会隐藏您的第一个意见箱。我建议您在div上创建一个类,其ID为“ resp _'+ x'”和建议框,然后将其隐藏:
$(document).click( function(){
$('.your_class').hide();
});
使用php重新加载内容 - javascript在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…
保留文本区域的数据或值,然后选择输入 - javascript通过$ _POST提交表单时,输入文件值仍然保留。像这样: if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…
带有AJAX和DOM处理API的下拉菜单 - javascript我从API获取数据,但未在我的下拉菜单中显示。如果我用?act=showprovince回显,结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …
尽管刷新,jQuery格式仍未应用于Ajax数据 - javascript我正在通过GET响应消息从服务器(php文件)的可折叠内部加载列表视图。但是,尽管刷新了jQuery元素,但jQuery格式并未应用于添加的HTML。我的页面在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码(仅相关代码)<script> lastRecor…