执行具有多个文本框的数据库搜索

Question

当用户在文本框中输入人名时，我正在尝试搜索数据库。 texbox是动态的，因此每当用户在下面的快照中看到“现场消防员数”文本框中输入一个数字时，下面的字段集中显示相同数量的文本框（“现场消防员列表”） ）。

然而，我的问题是，每当我尝试执行搜索时，搜索仅在第一个文本框上执行而不在其他文本框上执行。任何人都可以帮我突出和/或解释问题的原因吗？

---

occurrence.php

 <label>List of Firemen On Scene</label><br>
 <div class="NewlyCreatedSelectBoxes" name="firemen_list"></div>

search.php

<?php
require('connectdb.php'); 

if(isset($_POST['search_term']))
{
   $search_term = mysql_real_escape_string(htmlentities($_POST['search_term']));

   if(!empty($search_term))
   {
       $search = mysql_query("SELECT `fighterID`, `firstName`, `middleName`, `lastName` FROM `firefighterinfo` WHERE `firstName` LIKE '%$search_term%'");
        $result_count = mysql_num_rows($search);

        $suffix = ($result_count != 1) ? 's' : '';
        echo '<p>Your search for ', $search_term, ' returned ', $result_count, ' result', $suffix, '</p>';

        while($results_row = mysql_fetch_assoc($search))
        {
            echo '<p>', $results_row['firstName'], ' ', $results_row['middleName'], ' ', $results_row['lastName'], '</p>';
        }
    }
}
?>

---

search.js

function firemanAddingTextBoxes() {
var NumOfText = $("#NumOfTextBoxes").val();
$('.NewlyCreatedSelectBoxes').empty();
var txtBox = "";

for (i = 0; i < NumOfText; i++) {
    txtBox += '<input type="text" name="fireman[]" id="search" required/><br>';
}
$('.NewlyCreatedSelectBoxes').append(txtBox);



$('#search').keyup(function () {
    var search_term = $(this).val();

    $('#search_results').html('Searching database...');

    if (search_term !== '') {
        $.post('php/fireman_search.php', { search_term: search_term }, function (data) {
            $('#search_results').html(data);
        });
    } else {
        $('#search_results').html('Not Found');
    }

});
return false;

}

Answer 1

由于其他字段是动态的，因此您需要在搜索input上使用事件委派。此外，您正在添加具有重复ID的元素，这很糟糕。 ID必须是唯一的，只需使用类：

for (i = 0; i < NumOfText; i++) {
    txtBox += '<input type="text" name="fireman[]" class="search" required/><br>';
}

变化：

$('#search').keyup(function () {

要：

$(".NewlyCreatedSelectBoxes").on("keyup", ".search", function() {