javascript - 在 Javascript 中调用时类名不起作用？

Question

我有一个网页，其中有一个包含不同元素的表单，因为还有一个文本字段，它从数据库中搜索名称并以下拉方式显示它。

下面还有一个字段，它是一个按钮，通过它我可以添加新的 TextField ，同上。

在新添加的 TextField 中，我想要与上述相同的自动完成功能。

我已经给出了所有正确的类名，但它无法获取名称并以自动完成方式显示它。

NewUser.php

<?php

 $db = pg_connect("host=hostname port=5432 dbname=dbname user=vnaem password=root");
 pg_select($db, 'post_log', $_POST);


 $query=pg_query("SELECT id,name FROM users_users");

 $json=array();

while ($student = pg_fetch_array($query)) {
    $json[$student["id"]] = $student["name"];
}

$textval = json_encode($json);
$foo = "var partnames=" . $textval;
file_put_contents('autocomplete-Files/NewEntryValues.js', $foo);


?>


     . . . . . . .  .

           <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Name: </label>  
              <div class="col-md-4 col-sm-2 col-2">
              <input id="partner_names[]" name="partner_names[]" type="text" placeholder="Enter Full Name" class="form-control input-md newentry" style="width: 100%;">
              </div>


        <script type="text/javascript">

              $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID

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

                    $(wrapper).prepend('<br><div style="margin-left:50px;"><center><div class="form-group"> <label class=" control-label" for="textinput" style="margin-left:327px;">Name: </label> <div > <input id="partner_names[]" name="partner_names[]" type="text" placeholder="Enter Full Name" class="form-control input-md newentry" style="margin-top: -25px;margin-left: 403px;width: 241%;">  </div>  <a href="#" class="remove_field"><img src="images/del24.png" style="margin-left: 810px; margin-top: -81px;"></a></a></div>'); //add input box\
                }
            });

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

    . . . . . . . . 

 <script type="text/javascript" src="NewEntryValues.js"></script>
 <script type="text/javascript" src="autocomplete.js"></script>

如上所示，Input Tag中的类是newentry，在Javascript中也是newentry，

我正在 Another 中获取 newentry 类名，它负责数据库连接和自动完成逻辑。

那么，如何让该逻辑在这个脚本标签中也起作用!

autocomplete.js

$(function() {
    'use strict';

var peopleArray = $.map(partnames, function (value, key) { 
    return { value: value, data: key }; });

    // Setup jQuery ajax mock:
    $.mockjax({
        url: '*',
        responseTime: 2000,
        response: function(settings) {
            var query = settings.data.query,
                queryLowerCase = query.toLowerCase(),
                re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
                suggestions = $.grep(peopleArray, function(search) {
                    // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
                    return re.test(search.value);
                }),
                response = {
                    query: query,
                    suggestions: suggestions
                };

            this.responseText = JSON.stringify(response);
        }
    });



    // Initialize autocomplete with custom appendTo:
    $('.newentry').autocomplete({
        lookup: peopleArray
    });
});

NewEntryValues.js

var partnames={"19":"ABCD","42":"group","103":"cv","104":"name_to_1","105":"livetest","106":"live2"}

我正在使用这个 jQuery-Autocomplete供引用

Answer 1

您正在 .newentry 上初始化自动完成，而您的 .newentry 还不是 DOM 的一部分

// Initialize autocomplete with custom appendTo:
$('.newentry').autocomplete({
     lookup: peopleArray
});

.newentry 在 $(add_button).click() 中出现，当您prepend() .newentry 在 wrapper 中。

在 wrapper 中添加 .newentry 后初始化你的 autocomplete。

已更新

在 NewUser.php 中，

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var peopleArray = $.map(partnames, function (value, key) { 
        return { value: value, data: key }; 
    });

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

            $(wrapper).prepend('<br><div style="margin-left:50px;"><center><div class="form-group"> <label class=" control-label" for="textinput" style="margin-left:327px;">Name: </label> <div > <input id="partner_names[]" name="partner_names[]" type="text" placeholder="Enter Full Name" class="form-control input-md newentry" style="margin-top: -25px;margin-left: 403px;width: 241%;">  </div>  <a href="#" class="remove_field"><img src="images/del24.png" style="margin-left: 810px; margin-top: -81px;"></a></a></div>'); //add input box

            //Initialize autocomplete here when it has become the part of the DOM
            $('.newentry').autocomplete({
                lookup: peopleArray
            });
        }
    });

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