当我在搜索框中输入内容时,如何从服务器获取数据,然后按添加更多按钮?在jQuery AJAX中添加其他行的产品搜索框

时间:2017-11-15 06:54:46

标签: php html ajax jquery-plugins

大家好,我需要帮助来获取动态添加产品搜索框的自动搜索产品值,当我输入产品ID时,它会从产品表中显示。请帮我一个动态的自动搜索框。

以下是主html页面的代码:

<table id="row2">
<tr id="row1">
<td>product id</td><td><input type="text" id="pid" class="pid" name="p_id">
<div id="suggesstion-box"></div></td>
<td>product name</td> <td><input type="text" id="pname" name="p_name"></td>
<td>product type</td>    <td> <input type="text" id="ptype" name="p_type">
</td>
<td>product colour</td>    <td> <input type="text" id="pcolor" name="p_colour"></td>
</tr>
</table>
<button name="b1" id="b1" onClick="addrow()">Add More</button>

这是jQuery的代码:

$(document).ready(function(){

$("#pid").keyup(function(){
    $.ajax({
    type: "POST",
    url: "readCountry.php",
    data:'keyword='+$(this).val(),
    beforeSend: function(){
        $("#pid").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
    },
    success: function(data1,data2){
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data1);
        $("#fname").html(data2);
        $("#pid").css("background","#FFF");
    }
    });
});
});

function addrow()
{
//alert('hello');
$('#row2').append("<tr><td>product id</td><td><input type='text' class='pid' id='pid' name='p_id'><div id='suggesstion-box'></div></td><td>product name</td> <td><input type='text' id='pname' name='p_name'></td><td>product type</td>    <td> <input type='text' id='ptype' name='p_type'></td><td>product colour</td><td> <input type='text' id='pcolor' name='p_colour'></td></tr>");
}
function selectCountry(val) {
$("#pid").val(val);
$("#suggesstion-box").hide();
}
function name(val){
$("#pname").val(val);
}
function pt(val){
$("#ptype").val(val);
}
function colour(val){
$("#pcolor").val(val);
}

readcountery.php网页代码为:

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM raw_product WHERE p_id like '%" . $_POST["keyword"] . "%' ORDER BY p_id LIMIT 0,6";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="country-list">
<?php
foreach($result as $country) {
?>
<li onClick="selectCountry('<?php echo $country["p_id"]; ?>'); colour('<?php echo $country["p_color"]; ?>'); pt('<?php echo $country["p_color"]; ?>'); name('<?php echo $country["p_name"]; ?>');"><?php echo $country["p_id"]; echo "-".$country["p_name"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>

0 个答案:

没有答案