Javascript php;SQL:在表中列的所有单元格中自动建议

Javascript php;SQL:在表中列的所有单元格中自动建议,javascript,php,Javascript,Php,我是php新手。我希望在列的所有单元格中都有autosuggest选项。我能做到第一排,但不是全部。在我的表中,每当用户在前一行中写入内容时,就会自动添加新行 下面是我代码的一部分。请帮忙 <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript" src="script.js"></SCRIPT> </head> &l

我是php新手。我希望在列的所有单元格中都有autosuggest选项。我能做到第一排,但不是全部。在我的表中,每当用户在前一行中写入内容时,就会自动添加新行

下面是我代码的一部分。请帮忙

<link href="css/style.css" rel="stylesheet" type="text/css">
 <SCRIPT LANGUAGE="JavaScript" src="script.js"></SCRIPT>


</head>

<body>
<form action="" method = "post">

   <table>
      <tr>
         <td> Inv Num </td>
         <td><input type="text" name="inv_no" id="inv_no" /> </td>
      </tr>

      <tr>
         <td> Inv Date </td>
         <td><input type="date" name="inv_date" id="inv_date" /> </td>
      </tr>
    </table>

    <table border="1" style="border-collapse:collapse">
       <thead>
           <tr>
             <th>No</th>
             <th>P_name</th>
             <th>Qty</th>
             <th>Price</th>
             <th>Amount</th>

       </thead>
         <tbody id="inv-detail">
            <tr>
               <th><b class="no">1</b></th>
               <td>
                 <div class="main">

         <div id="holder"> 
               <input type="text" name="p_name[]" class="p_name" id="keyword" tabindex="0" />
        </div>
         <div id="ajax_response"></div>
         </div>
               </td>


               <td><input type="text" name="qty[]" class="qty" /></td>
               <td><input type="text" name="price" class="price" /></td>
               <td align="right"><b class = "amt"</b>0</td>
            </tr>
         </tbody>
            <tfoot>
              <tr align="center">
                 <td colspan="3"></td>
                 <td> Total</td>
                  <b><td class="total">0</td></b>
                </tr>
            </tfoot>
    </table>

</form>
<input type="button" id="click" value="Save" />

</body>
</html>
<script type="text/javascript">


  $(function (){

      $('#click').click(function(){
         addnewrow();
      });

     $('#inv-detail').delegate('.p_name','change',function(){
          var p_name = $('.p_name:last').val();
          if(p_name !='')
          {
             addnewrow();
          }      

          if($(this).val() == '' && $('.p_name').length > 1 && p_name == '')
          {
                $('.p_name:last').parent().parent().remove();
                total();
          }
      });

       $('#inv-detail').delegate('.qty,.price','keyup',function(){
           var tr = $(this).parent().parent();
           var qty = tr.find('.qty').val()-0;
           var price = tr.find('.price').val()-0;
           var amt =  qty* price;
           tr.find('.amt').html(amt);
            total();
       });

       function total()
       {
           var gg = 0;
           $('.amt').each(function(i, element)
           {
              var amt  =$(this).html()-0;
              gg += amt;

           });

           $('.total').html(gg);

       }

      //   $('input[type=date]'.datepicker();
    // $('body').delegate('input[type=date]',click,function(e)
    // {
     //   $(this).datepicker();
     //});

    });

  function addnewrow()
  {

    var n = ($('#inv-detail tr').length-0)+1;
    var row = '<tr>'+
               '<th><b class="no">' + n +'</b></th>'+
               '<td>'+
               '<div class="main">'+

         '<div id="holder">'+ 
               '<input type="text" name="p_name[]" class="p_name" id="keyword" tabindex="1" />'+
        '</div>'+
         '<div id="ajax_response"></div>'+
         '</div>'+
               '</td>'+
               '<td><input type="text" name="qty[]" class="qty" /></td>'+
               '<td><input type="text" name="price" class="price" /></td>'+
               '<td align="right"><b class = "amt"</b></td>'+
            '</tr>';

        $('#inv-detail').append(row);

   }

</script>

库存数量
库存日期
不
P_名称
数量
价格
数量
1.
1&&p_name=='')
{
$('.p_name:last').parent().parent().remove();
总数();
}
});
$(“#库存明细”).delegate(“.qty、.price”、“keyup”、函数(){
var tr=$(this.parent().parent();
var qty=tr.find('.qty').val()-0;
var price=tr.find('.price').val()-0;
var金额=数量*价格;
tr.find('.amt').html(amt);
总数();
});
函数总数()
{
var-gg=0;
$('.amt')。每个(函数(i,元素)
{
var amt=$(this.html()-0;
gg+=amt;
});
$('.total').html(gg);
}
//$('input[type=date]'.datepicker();
//$('body')。委托('input[type=date]',单击,函数(e)
// {
//$(this.datepicker();
//});
});
函数addnewrow()
{
变量n=($('#存货明细tr')。长度-0)+1;
变量行=“”+
“+n+”+
''+
''+
''+ 
''+
''+
''+
''+
''+
''+
''+

“你的php代码在哪里?Hi Richard,下面是我的代码:Hi Richard在原始postHi Mehraa中添加了详细信息,我不会那么大胆地编写我自己的autosuggest。我正在使用这个或这个,所以你应该发送一个json,而不是发送回html。然后你可以剥离所有自定义代码,这可能会起作用,但很难调试。使用jquer。”yui AutoComplete这是源代码,但它没有连接到PHP后端。您的PHP代码在哪里?Hi Richard,下面是我的代码:Hi Richard在原始postHi Mehraa中添加了详细信息,我不会那么大胆地编写我自己的autosuggest。我使用了这个或这个,所以您应该发送一个json,而不是发送回html。然后您可以删除所有的custom代码,可能可以工作,但调试起来很困难。使用jqueryui AutoComplete这是源代码,但它没有连接到PHP后端
/*
 cc:scriptime.blogspot.in
 edited by :midhun.pottmmal
*/
$(document).ready(function(){
    $(document).click(function(){
        $("#ajax_response").fadeOut('slow');
    });
    $("#keyword").focus();
    var offset = $("#keyword").offset();
    var width = $("#keyword").width()-2;
    $("#ajax_response").css("left",offset.left); 
    $("#ajax_response").css("width",width);
    $("#keyword").keyup(function(event){
         //alert(event.keyCode);
         var keyword = $("#keyword").val();
         if(keyword.length)
         {
             if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
             {
                 $("#loading").css("visibility","visible");
                 $.ajax({
                   type: "POST",
                   url: "name_fetch.php",
                   data: "data="+keyword,
                   success: function(msg){  
                    if(msg != 0)
                      $("#ajax_response").fadeIn("slow").html(msg);
                    else
                    {
                      $("#ajax_response").fadeIn("slow");   
                      $("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
                    }
                    $("#loading").css("visibility","hidden");
                   }
                 });
             }
             else
             {
                switch (event.keyCode)
                {
                 case 40:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.next().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:first").addClass("selected");
                     }
                 break;
                 case 38:
                 {
                      found = 0;
                      $("li").each(function(){
                         if($(this).attr("class") == "selected")
                            found = 1;
                      });
                      if(found == 1)
                      {
                        var sel = $("li[class='selected']");
                        sel.prev().addClass("selected");
                        sel.removeClass("selected");
                      }
                      else
                        $("li:last").addClass("selected");
                 }
                 break;
                 case 13:
                    $("#ajax_response").fadeOut("slow");
                    $("#keyword").val($("li[class='selected'] a").text());
                 break;
                }
             }
         }
         else
            $("#ajax_response").fadeOut("slow");
    });
    $("#ajax_response").mouseover(function(){
        $(this).find("li a:first-child").mouseover(function () {
              $(this).addClass("selected");
        });
        $(this).find("li a:first-child").mouseout(function () {
              $(this).removeClass("selected");
        });
        $(this).find("li a:first-child").click(function () {
              $("#keyword").val($(this).text());
              $("#ajax_response").fadeOut("slow");
        });
    });
});
<?php
    include("db.php");
    $keyword = $_POST['data'];
    $sql = "SELECT `desc` FROM master_material where `desc` like '%$keyword%' ORDER BY `desc`";
    //$sql = "select name from ".$db_table."";
    $result = mysql_query($sql) or die(mysql_error());
    if(mysql_num_rows($result))
    {
        echo '<ul class="list">';
        while($row = mysql_fetch_array($result))
        {

            $first = $row['desc'];
            $final = '<span class="bold">'.$first.'</span>'.$last;


            echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>';
        }
        echo "</ul>";
    }
    else
        echo 0;
?>