PHP-jQuery的自动完成与动态输入字段? [英] PHP- Jquery Autocomplete with dynamic input field?

问题描述

如果只有一个输入字段，则自动完成功能就可以正常工作.但就我而言，我必须生成输入字段.所以无论如何这是我的代码.

The Autocomplete worked just fine IF only have one input field. but in my case i have to generate the input field. so anyway this is my code.

HTML PART

<div class="clonedInput" id="input1">
    <div class="row" id="items">
     <div class="col-md-4">
      <div class="form-group">
        <div class="input-group">
         <span class="input-group-btn">
         </span>
         <input type="text" id="sug_input" class="form-control" name="title"  placeholder="Search for product name">
        </div>
        <div id="result" class="list-group result"></div>
      </div>
     </div>
    </div>
</div>
<input type="button" id="btnAdd" value="add another item" />
<input type="button" id="btnDel" value="remove item" />

脚本部分

<script type="text/javascript">
    $('#btnAdd').click(function() {
    var num        = $('.clonedInput').length;    // how many "duplicatable" input fields we currently have
    var newNum    = new Number(num + 1);        // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').prop('disabled',false);

    // business rule: you can only add 5 names
    if (newNum == 10)
        $('#btnAdd').attr('disabled','disabled');
});

$(document).ready(function() {
$('#sug_input').keyup(function(e) {
         var formData = {
             'product_name' : $('input[name=title]').val()
         };

         if(formData['product_name'].length >= 1){

           // process the form
           $.ajax({
               type        : 'POST',
               url         : 'ajax.php',
               data        : formData,
               dataType    : 'json',
               encode      : true
           })
               .done(function(data) {
                   //console.log(data);
                   $('#result').html(data).fadeIn();
                   $('#result li').click(function() {

                     $('#sug_input').val($(this).text());
                     $('#result').fadeOut(500);

                   });

                   $('#sug_input').blur(function(){
                     $("#result").fadeOut(500);
                   });

               });

         } else {

           $("#result").hide();

         };

         e.preventDefault();
     });

});

</script>

我已经在Internet上搜索并找到解决方案来解决此类问题，但问题是我不知道如何将其实现到我的脚本中，因为它与众不同.我认为我必须更改所有代码并影响其他脚本.因此，上面的代码用于html中的输入字段，是用于添加字段和自动完成的脚本. 顺便说一句，我是编程新手.

i have searched and find the solution in the internet to solve this kind of problem but the thing is i dont know how to implement that to my script because it quite different. i affraid that i have to change all the code and effecting the other script. so the code above is for the input field in html, the script for adding the field and autocomplete. btw i am new to programming.

推荐答案

在自动完成输入中添加类

Add class in your autocomplete input

<input type="text" id="sug_input" class="form-control sug_input" name="title"  placeholder="Search for product name">

如果您有多个具有相同类的自动完成输入，请更改您的自动完成输入js

If you have multiple autocomplete input with same class then change in you autocomplete input js

从使用类或id的直接元素调用更改为父子相对关系. 请参阅下面的更改示例.根据您的要求进行更改.

change from direct element call using class or id to parent child relative relations. See below changed example. Change according to your requirment.

    $(document).ready(function() {
    $(document).on('keyup', ".sug_input",function (e) {
             var formData = {
                 'product_name' : $(this).val()
             };
             $parent_container = $(this).closest('.clonedInput');
             $that = $(this);

             if(formData['product_name'].length >= 1){

               // process the form
               $.ajax({
                   type        : 'POST',
                   url         : 'ajax.php',
                   data        : formData,
                   dataType    : 'json',
                   encode      : true
               })
                   .done(function(data) {
                       //console.log(data);
                       $parent_container.find('#result').html(data).fadeIn();
                       $parent_container.find('#result li').click(function() {

                         $that.val($(this).text());
                         $parent_container.find('#result').fadeOut(500);

                       });

                       $that.blur(function(){
                         $parent_container.find("#result").fadeOut(500);
                       });

                   });

             } else {

               $parent_container.find("#result").hide();

             };

             e.preventDefault();
         });

    });

这篇关于PHP-jQuery的自动完成与动态输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！