javascript - 关于动态文本框的建议

Question

我遇到了这个问题，我不知道该怎么做，我的建议框显示在第一个输入上，但是当我添加更多文本框时，它只显示我在 autocomplete.php 上的错误，我对 jquery 真的很陌生和脚本，我真的不知道该怎么办

这是我的建议框的 html 和 JS

< script type = "text/javascript" >
  $(document).on('click', '.service', function auto() {
    //Al escribr dentro del input con id="service"
    $('#service').keypress(function() {
      //Obtenemos el value del input
      var service = $(this).val();
      var dataString = 'service=' + service;

      //Le pasamos el valor del input al ajax
      $.ajax({
        type: "POST",
        url: "autocomplete.php",
        data: dataString,
        success: function(data) {
          //Escribimos las sugerencias que nos manda la consulta
          $('#suggestions').fadeIn(1000).html(data);
          //Al hacer click en algua de las sugerencias
          $('.suggest-element a').click(function() {
            //Obtenemos la id unica de la sugerencia pulsada
            var id = $(this).attr('id');
            //Editamos el valor del input con data de la sugerencia pulsada
            $('#service').val($('#' + id).attr('data'));
            //Hacemos desaparecer el resto de sugerencias
            $('#suggestions').fadeOut(1000);
          });
        }
      });
    });
  }); < /script>

<td align="center">
  <input type="checkbox" value="X" name="articulo[]" id="articulo" />
</td>
<td>
  <input class="form-control" name="cantidad[]" id="cantidad" type="text" maxlength="5" size="5" value="">
</td>

<td align="center">
  <input type="text" size="50" id="service" class="auto" name="service[]" />
  <div id="suggestions"></div>
</td>
</tr>
</table>
<table width="900" class="table table-bordered table-condensed" align="center">

  <div id="inputs"></div>

我用它来动态输出

< script type = "text/javascript" >
  var j = 1;
// Input adding function
function addInput() {
    $('#inputs').append(
      '<table width="900" class="table table-bordered table-condensed"  align="center"><tr>' +
      '<td width="20"align="center"><input type="checkbox" value="X" name="articulo[]" id="articulo' + j + '"/></td> ' +
      '<td width="95"> <input class="form-control"name="cantidad[]" id="cantidad' + j + '" type="text"  maxlength="5" size="5" value="" > </td>' +
      '<td width="100" align="center"><input type="text" size="50" id="service' + j + '" class="auto"name="service[]" /></td><div id="suggestions"></div> ' +
      '</tr></table>'
    );
    j++;
  }
  // Event handler and the first input
$(document).ready(function() {
  $('#adder').click(addInput);
  addInput();
}); < /script>

我已经尝试将建议脚本放入 addinput 函数中以更改选择器，但我也没有尝试更改此行

$('.suggest-element a' ).click( function(){

对于这个

$(‘#suggestions’).on(‘click’,’.suggest-element’, function(){

但是已经一周了，我开始认为我应该重写整个代码:( 这是我的 autocomplete.php

if(isset($_POST['service'])) {
            $queryString = $_POST['service'];

        // Is the string length greater than 0?

        if(strlen($queryString) >0) {
            countries it works like this...
             LIKE '$queryString%' LIMIT 10
                            $query = new consulta("SELECT ALL CVE_ART, DESCR FROM INVE$empresa WHERE ((upper(DESCR COLLATE ES_ES_CI_AI )) LIKE '%$queryString%' OR CVE_ART LIKE '%$queryString%') AND STATUS = 'A' ORDER BY DESCR ASC, CVE_ART ASC");
                if($query) {
                // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                do {
                    // Format the results, im using <li> for the list, you can change it.
                    // The onClick function fills the textbox with the result.
                    // YOU MUST CHANGE: $result->value to $result->your_colum
                    echo '<div class="suggest-element"><a class="service" data="'.$query->rows['DESCR'].'"id="service'.$query->rows['CVE_ART'].'">'.utf8_encode($query->rows['DESCR']).'</a></div>';
                }  while ($query->rows = $query->consulta_exec->fetch(PDO::FETCH_ASSOC));

            } else {
                echo 'ERROR: There was a problem with the query.';
            }
        } else {
            // Dont do anything.
        } // There is a queryString.
    } else {
        echo 'There should be no direct access to this scripts!';
    }
}

Answer 1

每次调用 addInput 函数时，都会附加一个新的 div:

<div id="suggestions"></div>

因此您将拥有多个具有相同 id 的 div。当您调用时:

$('#suggestions').fadeIn(1000).html(data);

只有您的第一个建议框才会填充数据。尝试向该元素添加一个类并按类进行查询