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

Question

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

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

Answer 1

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

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

.newentry 在prepend() 中出现.newentry 中的wrapper 中的.newentry。

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

Answer 2

您需要在将文本输入附加到 DOM 后对其进行初始化。当您使用 .newentry 作为选择器时，它会获取当前属于 DOM 的元素，但不会获取稍后将附加的元素。

Answer 3

试试这样的。仔细检查代码。它是我之前代码的一部分，效果很好。我在文本框中得到了值，但是正如您在我的 php 代码中看到的那样，我已经注释了代码以获取下拉列表中的值。

您的 php 文件 (autocomplete.php)

<?php 
$searchTerm = $_GET['term'];
$query = mysql_query("select name from test where name LIKE '%".$searchTerm."%' ORDER BY name ASC"); // Run your query
/*echo '<select name="taskname">'; // Open your drop down box

// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['name'].'">'.$row['name'].'</option>';
}
echo '</select>';*/
while ($row = mysql_fetch_array($query)) {
    $data[] = $row['name'];
}

//return json data
echo json_encode($data);
?>

您的 HTML 文件：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
        $(function() 
        {
$( "#skills" ).autocomplete({
    source: 'autocomplete.php'
});
});
</script>
<td><input id="skills" name="taskname"></td></tr>
    <label for="skills">Task Name: </label>
    <input id="skills">