javascript - 使用多个文本框执行数据库搜索

Question

当用户在文本框中输入人名时，我正在尝试执行数据库搜索。文本框是动态的，所以每当用户在“现场消防员人数”文本框中输入数字时，如下面的快照所示，相同数量的文本框出现在下面的字段集中(“现场消防员名单” ).

但是，我的问题是，每当我尝试执行搜索时，搜索只在第一个文本框上执行，而不会在其他文本框上执行。任何人都可以帮助我强调和/或解释问题可能是什么吗？

---

occurrence.php

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

搜索.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>';
        }
    }
}
?>

---

搜索.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 上使用事件委托(delegate)。此外，您要添加具有重复 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() {