具有多种输入类型的自动完成功能，动态插入

Question

I'm trying to make an autocomplete using sql, php, javascript, using dinamically inserted lines on a table.

The point is that the autocomplete is working for the first line but not working for the lines I add after.

My HTML to add lines:

<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>

My Javascript script for the add lines dinamically:

$(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>

My Javascript script for the autocomplete:

<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>

My php file:

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);
}

I expected the autocomplete to work for as many lines as I inserted. Only working for the first line. Can someone please point me the right direction?

This is the process. The autocomplete only works on the first line on square #1. On #4 it does not work.

Thank you very much.

Answer 1

I see two things:

1. You are selecting your input with an ID, implying that there should only be one. But because you expect the user to add several #Contacto, I would say assigning a class .Contacto (and selecting on that) makes more sense.
2. When you clone() your input box, you aren't including the event listener you attached to the first one. clone() has an overload that lets you include those attached event listeners. You should be able to use clone(true) to copy not just the input, but the autocomplete functionality as well.