具有自动插入功能的多种输入类型

时间:2019-07-16 14:18:37

标签: javascript php html mysql

我正在尝试使用sql,php,javascript,在表格上使用动态插入的行进行自动填充。

重点是自动填充功能适用于第一行,但不适用于我添加的后一行。

我的HTML添加行:

<table class='ui striped table inverted'>
   <tr align="center">
      <td>Contacto</td>
   </tr>
   <tr align="center" class="linhas">
      <td>
         <div class="ui input">
            <input type="text" id = "contacto" />
         </div>
      </td>
      <td><a href="#" class="removerCampo" title="Remover linha">Remover</a></td>
   </tr>
</table>
<tr>
   <td colspan="2"><a href="#" class="adicionarCampo" title="Adicionar item">Adicionar linha</a></td>
</tr>

我的Javascript脚本以动态方式添加行:

$(function () {
           function removeCampo() {
            $(".removerCampo").unbind("click");
            $(".removerCampo").bind("click", function () {
               if($("tr.linhas").length > 1){
                $(this).parent().parent().remove();
               }
            });
           }

           $(".adicionarCampo").click(function () {

            novoCampo = $("tr.linhas:first").clone();  

            novoCampo.find("input").val("");

            novoCampo.insertAfter("tr.linhas:last");

            removeCampo();
           });
         });
      </script>

我的自动完成的Javascript脚本:

<script type="text/javascript">
$(document).ready(function() {

      function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
      }

      $("#contacto").autocomplete({
            source: "searchContactos.php",
            minLength: 3,
            select: function(event,ui) {
                  log(ui.item ?
                        "Selected: " + ui.item.value :
                        "Nothing selected input was " + this.value);
            }
      });


});
</script>

我的php文件:

if (isset($_GET['term'])){
  $autoCompleteResult = array();

  $tsql = "SELECT no_, name FROM [Master].[dbo].[Contactos Portal] WHERE name 
           LIKE '$term' or no_ LIKE '$term' ";
  $result = sqlsrv_query($conn, $tsql);

  while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)){
     array_push($autoCompleteResult,array("value" => $row['name'] .' -> '. 
     $row['no_'] ));
  }

sqlsrv_close($conn);
echo json_encode($autoCompleteResult);
}

我希望自动完成功能可以在插入的行中运行。仅适用于第一行。有人可以给我指出正确的方向吗?

这是过程。自动完成功能仅适用于正方形#1的第一行。在#4上它不起作用。

Process

非常感谢您。

1 个答案:

答案 0 :(得分:0)

我看到两件事:

  1. 您正在选择带有ID的输入,这意味着应该只有一个。但是,因为您希望用户添加几个#Contacto,所以我说分配 class .Contacto(并在其中进行选择)更有意义。
  2. clone()输入框中,您没有包括附加到第一个事件监听器的事件监听器。 clone()有一个overload,可让您包括那些附加的事件侦听器。您应该能够使用clone(true)不仅复制输入,还复制自动完成功能。