使用typeahead选择项目时如何将数据提取到输入字段中

时间:2015-01-25 20:12:21

标签: php jquery mysql ajax

有一个输入字段使用typeahead来自动填充我的数据库中的项目,我想根据所选的项目名称将所选项目的相应价格提取到输入字段中。很高兴你帮忙。感谢

html表格

<form method="post" action="" >
    <div class="widget box">
                        <div class="widget-content no-padding">
                        <table class="table table-hover table-striped table-bordered table-highlight-head">
                                <thead>
                                    <tr>
                                        <th>Item name</th>
                                        <th>Quantity</th>
                                        <th>Price</th>
                                        <th>Amount</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                            <tr>

                                <td><input type="text" name="item_name" class="form-control iname" id="item_name"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control" id="price"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>                       
                            </tr>
                            <tr>
                                <td><input type="text" class="form-control iname"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>
                                <td><input type="text" class="form-control"></td>

    <td><input type="text" class="form-control"></td>                       
                            </tr>
                                </tbody>
                            </table>
                        </div>
                </div>
</form>

脚本

<script type="text/javascript">
                   $(document).ready(function(){
                       $("#item_name").change(function(){
                         var item =$("#item_name").val();
                         $.ajax({
                        type:"post",
                        url:"auto_item_price.php",
                        data:"item_name="+item,
                        success:function(data){
                              $("#price").val(data);
                        }
                         });
                       });
                   });
            </script>

php代码

<?php
include("includes/db_connect.php");
$item_name = $_POST['item_name'];
$sql = "SELECT purchase_price FROM items WHERE item_name = '$item_name'";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
echo "{$row['purchase_price']}";
}
?>

预先输入代码

<script type="text/javascript">
    $(document).ready(function() {
   $('input.iname').typeahead({
   name: 'item_name',
  remote : 'item_list.php?query=%QUERY'
     });;
    })
    </script>

我使用了twitter / typeahead

0 个答案:

没有答案