javascript - 用JavaScript调用时，类名不起作用？

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

在其下还有一个字段，它是一个按钮，通过它我可以添加新的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，

我在另一个数据库中获取了 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供引用

最佳答案

您正在对.newentry初始化自动完成功能，而您的.newentry尚未成为DOM的一部分

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

当您对.newentry中的$(add_button).click()进行prepend()时，.newentry就会出现在wrapper中。

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

更新了

在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--;
    })
});