将自动完成添加到动态输入

时间:2016-03-09 16:23:35

标签: php jquery ajax

我是jquery的新手,我需要更改整个代码,以便自动完成功能适用于新输入,但我无法使自动完成工作在我的动态输入上,这是我的自动完成代码。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {    
    //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>

这是我的addinput js

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

和html

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

我是新手,所以我不知道该怎么做,抱歉我的英文不好

0 个答案:

没有答案