jQuery自动补全多个字段(动态创建)

时间:2018-07-19 13:36:53

标签: javascript jquery autocomplete

我搜索并尝试了许多关于stackoverflow的决定,但是我找不到我的问题的答案。我试图从数据库自动完成输入值。

仅对第一行有效。如果我使用jquery动态添加新行,它不会自动完成功能。

我的HTML表单:

<form name="form1" id="mainForm" method="post"enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>">
    <div class="card-body">
        <div class="row form-group">
            <div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label></div>
            <div class="col-12 col-md-10">
                <div class="input-group fieldGroup">
                    <input type="text" id="hiddenID" name="hiddenID[]" class="form-control" placeholder="ID Товара"/>
                    <input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" />
                    <input type="text" id="prod_count" name="prod_count[]" class="form-control" placeholder="Кол-во"/>
                <input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена"/>
                <div class="input-group-addon"> 
                    <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>+</a>
                </div>
            </div>
            </div>
        </div>

        <div class="row form-group" style="display: none;">
            <div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label></div>
            <div class="col-12 col-md-10">
                <div class="input-group fieldGroupCopy">
                    <input type="text" id="hiddenID" name="hiddenID[]" class="form-control" placeholder="ID Товара"/>
                    <input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" />
                    <input type="text" id="prod_count" name="prod_count[]" class="form-control" placeholder="Кол-во"/>
                    <input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена"/>
                <div class="input-group-addon"> 
                    <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>-</a>
                </div>
            </div>
            </div>
        </div>
    </div>                  
    <div class="card-footer">
        <input type="submit" id="submit" class="btn btn-primary" value="Оприходовать">
        <input type="reset" id="reset" class="btn btn-danger" value="Очистить форму">
    </div>
</form>

JavaScript

    // Add new rows
    jQuery(document).ready(function(){
        //group add limit
        var maxGroup = 30;

        //add more fields group
        jQuery(".addMore").click(function(){
            if(jQuery('body').find('.fieldGroup').length < maxGroup){
                var fieldHTML = '<div class="input-group fieldGroup">'+jQuery(".fieldGroupCopy").html()+'</div>';
                jQuery('body').find('.fieldGroup:last').after(fieldHTML);
            }else{
                alert('Максимально можно добавить '+maxGroup+' товаров.');
            }
        });

        //remove fields group
        jQuery("body").on("click",".remove",function(){ 
            jQuery(this).parents(".fieldGroup").remove();
        });
    });


    // Autocomplete
    jQuery('.autoc').on("focus", function(){
          jQuery(this).autocomplete({
           minLength: 2,
           source: "autocomplete_name.php",
            select: function( event, ui ) {
                event.preventDefault();
                jQuery("#prod_id").val(ui.item.label);
                jQuery("#hiddenID").val(ui.item.id);
            }
            });
    });

How its works on my site... (picture)

在每一行中,我要自动完成2个输入: 1)给prod_id贴标签 2)要hidden_​​id从数据库放入ID

我不要求别人为我做这项工作。感谢您的帮助。

PS:对于我的英语不好,我深表歉意...

2 个答案:

答案 0 :(得分:0)

在您的Jquery函数中像这样发送数据

 <script type="text/javascript">        
            $("#youid").typeahead({name: 'indexAutoSuggestCat',remote :'autocomplete_name.php?query=%QUERY&action=autoSuggestCategoryList',minLength:1});
            clearConsole();
 </script>

并返回数据json,因此请使用echo json_encode($data);

答案 1 :(得分:0)

最后,我将代码更改为此并且可以正常工作。如果有人需要此代码,则可以使用以下代码:

HTML:

                            <form name="form1" id="mainForm" method="post"enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>">

                        <div class="card-body">
                              <div class="row form-group">
                                <div class="col col-md-2"><label for="text-input" class=" form-control-label">Продавец:</label></div>
                                <div class="col-12 col-md-10">
                                  <select name="seller" id="seller" class="form-control">
                                    <?php echo get_select_options_legals('ur_name_short', 'ur_inn'); ?>
                                  </select>
                                  <small class="form-text text-muted">Выберите юридического лицо, от которого будет осуществлена продажа.</small>
                                </div>
                              </div>
                              <div class="row form-group">
                                <div class="col col-md-2"><label for="text-input" class=" form-control-label">Клиент:</label></div>
                                <div class="col-12 col-md-10">
                                  <input hidden type="text" name="client_id" id="client_id" class="form-control" placeholder="Введите данные клиента"/>
                                  <input type="text" name="client_name" id="client_name" class="autoc_client form-control" placeholder="Введите данные клиента"/>
                                  <small class="form-text text-muted">Если клиента нет в базе, сначала <mark><a href="/crm/clients/add_client.php" target="_blank">необходимо его создать</a></mark>. (откроется в новой вкладке)</small>
                                </div>
                              </div>
                              <div class="row form-group">
                                <div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label><small class="form-text text-muted">Примечание: Сначала заполняем строку, потом добавляем новую...</small></div>
                                <div class="col-12 col-md-10 input_fields_wrap">
                                    <div class="input-group">
                                        <input hidden type="text" id="hidden_ID" name="hidden_ID[]" class="form-control" placeholder="ID Товара"/>
                                        <input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" required />
                                        <input type="text" id="prod_count" name="prod_count[]" class="count_input form-control" placeholder="Кол-во" required/>
                                        <input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена" required/>
                                        <button class="btn btn-success add_field_button">+</button>
                                    </div>
                                </div>
                              </div>
                              <div class="row form-group">
                                <div class="col col-md-2"><label for="text-input" class=" form-control-label">Скидка:</label></div>
                                <div class="col-12 col-md-10">
                                  <input type="text" name="discount" id="discount" class="form-control" placeholder="Скидка в рублях"/>
                                </div>
                              </div>
                              <div class="row form-group">
                                <div class="col col-md-2"><label for="text-input" class=" form-control-label">Магазин:</label></div>
                                <div class="col-12 col-md-10">
                                  <select name="select" id="select" class="form-control">
                                    <?php echo get_select_options('shops', 'shop_name'); ?>
                                  </select>
                                </div>
                              </div>
                        </div>                  
                          <div class="card-footer">
                            <input type="submit" id="submit" class="btn btn-success" value="Добавить продажу">
                          </div>
                            </form>

Javascript:

    // Подсчет кол-ва товаров

    jQuery(document).on("change", ".count_input", function() {
        var sum = 0;
        jQuery(".count_input").each(function(){
            sum += +jQuery(this).val();
        });
        jQuery(".count_input_total").val(sum);
    });

    // Добавление новых строк
    jQuery(document).ready(function() {
        var max_fields      = 50; //maximum input boxes allowed
        var wrapper         = jQuery(".input_fields_wrap"); //Fields wrapper
        var add_button      = jQuery(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        jQuery(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment               

                jQuery(wrapper).append('<div class="input-group"><input type="text" hidden id="hidden_ID_' + x + '" name="hidden_ID[]" class="form-control" placeholder="ID Товара"/><input type="text" id="prod_id_' + x + '" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" required /><input type="text" id="prod_count_' + x + '" name="prod_count[]" class="count_input form-control" placeholder="Кол-во" required /><input type="text" id="prod_price_' + x + '" name="prod_price[]" class="form-control" placeholder="Цена" required /><a href="#" class="btn btn-danger remove_field">-</a></div>'); //add input box


                jQuery( "input[id='prod_id_"+ x +"']" ).autocomplete({
                    source: "autocomplete_name.php",
                    select: function( event, ui ) {
                        event.preventDefault();
                        jQuery("#prod_id_"+ x +"").val(ui.item.value);
                        jQuery("#hidden_ID_"+ x +"").val(ui.item.id);
                    }
                }); 
            }
        });

        jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); jQuery(this).parent('div').remove(); x--;
        })
    });

    // Включаем автокомплит
      jQuery(function() {

        jQuery( "input[name^='prod_id']" ).autocomplete({
            source: "autocomplete_name.php",
            select: function( event, ui ) {
                event.preventDefault();
                jQuery("#prod_id").val(ui.item.value);
                jQuery("#hidden_ID").val(ui.item.id);
            }
        });     
      });

    // Автокомлит клиента
    jQuery('.autoc_client').on("focus", function(){
          jQuery(this).autocomplete({
           minLength: 2,
           source: "autocomplete_client.php",
            select: function( event, ui ) {
                event.preventDefault();
                jQuery("#client_name").val(ui.item.label);
                jQuery("#client_id").val(ui.item.id);
            }
            });
    });