2014-10-07 24 views
-2

对不起英语不好。 所以我想尝试使动态添加一个新的输入字段关键使用autocompelete(自动建议)evey新动态添加。所以每增加一个新的输入字段将有autocompelete(建议)too.but我在JavaScript混淆,这一切我的编码如何在javascript中通过php,自动完成(autosuggestion)中的动态添加?

<html> 
    <head> 
     <form method = "POST" action="text.php" > 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Admin</title> 
     <link href="css/inputpo.css" rel="stylesheet"> 
     <link rel="stylesheet" href="css/jquery-ui.css"/> 
     <script src="js/jquery-1.9.1.js"></script> 
     <script src="js/jquery-ui.js"></script> 
     <!--<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>--> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#code1").autocomplete({ 
       source: 'autosuggest.php', 
       select:function(event, ui){ 
          $('#descrip1').val(ui.item.descrip1); 
          $('#color1').val(ui.item.color1); 
          $('#type1').val(ui.item.type1); 
          $('#qty1').val(ui.item.qty1); 
       } 
      }); 
     }); 
     </script>   
     <script type="text/javascript"> 

      $txt=new Array(); 

      $(function(){ 
       $('#go').on('click',function(){ 
        console.log($('form').serialize()); 
       }) 

       $('body').on('keydown','.last',function(){ 
        $('.last').removeClass('last'); 
        $('#go','body').before(
        '<table><tr><td><input class="last" type="input" id="code1" name="code'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value="<?php echo $code1; ?>"></td><td><input class="last" type="text" id="descrip" name="descrip'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td><td><input class="last" type="text" id="type" name="type'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td><td><input class="last" type="text" id="color" name="color'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td></tr></table>');   
       }) 
      }) 
     </script> 

    </head> 
    <body> 
    <?php 
    if($_GET) { 
    $code1  = isset($_POST['code']) ? $_POST['code1'] : ''; 
    $descrip = isset($_POST['descrip1']) ? $_POST['descrip1'] : ''; 
    $color  = isset($_POST['color1']) ? $_POST['color1'] : ''; 
    $type  = isset($_POST['type1']) ? $_POST['type1'] : ''; 
    $qty  = isset($_POST['qty1']) ? $_POST['qty1'] : ''; 
    } 
    $code1=""; 
    ?> 
     <div class="isi"> 

       <table height="51" border="0" cellspacing="2"> 
       <tr> 
        <td width="99" align="center" label for="suggestionbox"> 
         <div align="center">Code Product</div></label> 
        </td> 
        <td> 
         <div align="center">Description</div> 
        </td> 
        <td> 
         <div align="center">Type</div> 
        </td> 
        <td> 
         <div align="center">Color</div> 
        </td> 
       </tr> 
       <tr> 
       <td> 
       <input class="last" type="text" id="code1" name='code1' value="<?php echo $code1;?>"> 
       </td> 
       <td> 
       <input class="last" type="text" id="descrip1" name='descrip1' value=""> 
       </td> 
       <td> 
       <input class="last" type="text" id="type1" name='type1' value=""> 
       </td> 
       <td> 
       <input class="last" type="text" id="color1" name='color1' value=""> 
       </td> 

       </tr> 
      </table> 
       <input id="go" name="" type="submit" /></td> 
     </div> 
    </body> 
</html> 

它是在动态刚刚在Javascript这里误差自动完成(自动建议)几乎是正确的

<td><input class="last" type="input" id="code1" name="code'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value="<?php echo $code1; ?>"></td> 

如果值=”“,其正确的,但不能给出第二场自动完成(建议),假定值是"<?php echo $code1; ?>"但在现场的意志的观点是"<?php echo $code1; ?>"有人能帮助我吗?

+0

它像这样(自我暗示)尝试输入AB,但不能添加新的字段仍然有错误http://jsfiddle.net/3jLbm9sp/1/,这对于动态但不能自动定义http://jsfiddle.net/3jLbm9sp/1/,不能动态和自动组织。 – Blackarch 2014-10-07 13:57:15

回答

0

$ code1 =“”;在if条件之后,所以无论从$code1 = isset($_POST['code']) ? $_POST['code1'] : '';中发出的值是多少,它都会在末尾$code = "";再次分配,这使得它每次都是空的。

所以做这样的

<?php 
    $code1=""; 
    if($_GET) { 
    $code1  = isset($_POST['code']) ? $_POST['code1'] : ''; 
    $descrip = isset($_POST['descrip1']) ? $_POST['descrip1'] : ''; 
    $color  = isset($_POST['color1']) ? $_POST['color1'] : ''; 
    $type  = isset($_POST['type1']) ? $_POST['type1'] : ''; 
    $qty  = isset($_POST['qty1']) ? $_POST['qty1'] : ''; 
    } 
    ?> 

现在第一ASIGN velue“”到$代码1,如果$ _GET具有价值的新值被分配给它

,或者你可以再次添加,并把它在那里

+0

没有它已经是正确的,所以当我尝试输入第一个字段时,它将添加新字段,对于第一个字段已经有autocompelete并动态添加(对于第二个字段),但是当我尝试为第二个字段添加文本时,它没有autocompelete。当我检查失败的是在Javascript动态,因为值是“$ code1”,当value =“”可以添加新的字段,但不能自动完成,btw值必须$ code1自动完成第二个字段。 – Blackarch 2014-10-07 04:34:19

0

尝试使用session + ajax。我不是100%肯定这是否会满足您的需要或不:

page1.php中

<?php 
session_start(); ?> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Admin</title> 
     <link href="css/inputpo.css" rel="stylesheet"> 
     <link rel="stylesheet" href="css/jquery-ui.css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    </head> 
    <body> 
    <h1>Form</h1> 
    <form method = "POST" action="text.php" id="masterform"> 
    <div id="adder">Add</div><div id="delete">Clear</div> 
     <div id="loader"></div> 
     <input id="go" name="" type="submit" /> 
    </form> 
    <script type="text/javascript"> 

     function AddFormRow(IdElem,Func) 
      { 
       $("#"+IdElem).html("Loading..."); 

       if(Func == 1) 
        Qfunc = 'command=true'; 
       if(Func == 0) 
        Qfunc = 'command=false'; 

       $.ajax({ 
         url: "page2.php?"+Qfunc, 
         cache: false, 
         success: function(result) { 
           $("#"+IdElem).html(result); 
          } 
        }); 
      } 

     $(document).ready(function(){ 
      AddFormRow('loader',1); 
      $("#adder").click(function() { 
        AddFormRow('loader',1); 
       }); 
      $("#delete").click(function() { 
        AddFormRow('loader',0); 
       }); 
     }); 
     </script> 
</body> 
</html> 

使page2.php

<?php 
    error_reporting(E_ALL); 
    session_start(); 


    if(isset($_GET['command']) && $_GET['command'] !== 'true') 
     unset($_SESSION['myform']); 

    $_SESSION['myform'][] = 1; 

    for($i = 0; $i < count($_SESSION['myform']); $i++) { ?> 

     <table height="51" border="0" cellspacing="2"> 
      <tr> 
       <td width="99" align="center" label for="suggestionbox"><div align="center">Code Product</div></label></td> 
       <td><div align="center">Description <?php echo $i; ?></div></td> 
       <td><div align="center">Type <?php echo $i; ?></div></td> 
       <td><div align="center">Color <?php echo $i; ?></div></td> 
      </tr> 
      <tr> 
       <td><input class="last" type="text" id="code<?php echo $i; ?>" name='code<?php echo $i; ?>' value="code<?php echo $i; ?>"></td> 
       <td><input class="last" type="text" id="descrip<?php echo $i; ?>" name='descrip<?php echo $i; ?>' value=""></td> 
       <td><input class="last" type="text" id="type<?php echo $i; ?>" name='type<?php echo $i; ?>' value=""></td> 
       <td><input class="last" type="text" id="color<?php echo $i; ?>" name='color<?php echo $i; ?>' value=""></td> 
      </tr> 
     </table> 
     <?php } ?> 
+0

Thx的评论,它不是这样的,所以首先我想让动态添加像这样http://stackoverflow.com/questions/26215680/how-to-dynamically-add-an-new-input-field-on-keydown-使用-jquery和它已经很好,接下来我想为每个领域提供自动完成(建议),所以当我尝试它是错误的,因为在这里'失败'​​“>'in value =”<?php echo $ code1;?>“ – Blackarch 2014-10-07 13:03:52

相关问题