Ajax Autocomplete 用相同的值填充两个输入字段，尽管我已经用不同的逻辑分别实现了这两个函数

Posted 2023-05-08

【中文标题】Ajax Autocomplete 用相同的值填充两个输入字段，尽管我已经用不同的逻辑分别实现了这两个函数

【英文标题】：Ajax Autocomplete filling up both input fierlds witth same value, although I have implemented both functions separately with different logic

【发布时间】：2020-03-26 03:02:44

【问题描述】：

我有 2 个输入字段

学生姓名输入字段 组名输入字段

我已经实现了 2 个不同的 ajax 逻辑来获取学生和组的列表，以便在不同的标签中分别在文本框中自动完成。

但是当我从学生列表或组列表的任何自动完成值中单击一个值时，两个输入字段都被选定的值填充

图片： Group List

图片： Both fields are filling up

获取学生代码（javascript）：

<script>
        $(document).ready(function()
        
            $("#studentname").keyup(function()
            
                var studentName = $(this).val();
                if(studentName != '')
                
                    $.ajax(
                       url: "SearchStudent.php",
                       method: "POST",
                       data:studentName:studentName,
                       success: function(data)
                       
                           $('#students').fadeIn();
                           $('#students').html(data);
                       
                    );
                
                else
                
                    $('#students').fadeOut();
                    $('#students').html("");
                
            );
            $(document).on('click','li',function()
            
               $('#studentname').val($(this).text());
               $('#students').fadeOut();
            );
        );
    </script>

获取组代码 (JavaScript)：

<script>
        $(document).ready(function()
        
            $("#groupname").keyup(function()
            
                var groupName = $(this).val();
                if(groupName != '')
                
                    $.ajax(
                       url: "SearchGroup.php",
                       method: "POST",
                       data:groupName:groupName,
                       success: function(Groupdata)
                       
                           $('#groups').fadeIn();
                           $('#groups').html(Groupdata);
                       
                    );
                
                else
                
                    $('#groups').fadeOut();
                    $('#groups').html("");
                
            );
            $(document).on('click','li',function()
            
               $('#groupname').val($(this).text());
               $('#groups').fadeOut();
            );
        );
    </script>

PHP 代码（SearchStudent.php）：

<?php
session_start();
require_once "../../config/connection.php";
if(isset($_SESSION['admin']) && $_POST['studentName'])

    $StudentName = $_POST['studentName'];

$output = '';
$searchStudent = "SELECT StudentName FROM student_details WHERE StudentName LIKE '%$StudentName%' LIMIT 10";
$searchStudentFire = mysqli_query($conn, $searchStudent);
$output = "<ul style='list-style-type: none;'>";
if(mysqli_num_rows($searchStudentFire) > 0)

    while($StudentList = mysqli_fetch_assoc($searchStudentFire))
    
        $output.= "<li style='font-weight:bold; border: 1px; padding: 10px; box-shadow: 5px 10px 18px #888888;'>".$StudentList['StudentName']."</li>";
    

else

    $output.= "<li>No Student Found</li>";

$output .= "</ul>";
echo $output;

else

    echo "Unautorizarion Error !!";

?>

PHP 代码（SearchGroup.php）：

<?php
session_start();
require_once "../../config/connection.php";
if(isset($_SESSION['admin']) && $_POST['groupName'])

    $GroupName = $_POST['groupName'];

$output = '';
$searchGroup = "SELECT GroupName FROM groups WHERE GroupName LIKE '%$GroupName%' LIMIT 10";
$searchGroupFire = mysqli_query($conn, $searchGroup);
$output = "<ul style='list-style-type: none;'>";
if(mysqli_num_rows($searchGroupFire) > 0)

    while($GroupList = mysqli_fetch_assoc($searchGroupFire))
    
        $output.= "<li style='font-weight:bold; border: 1px; padding: 10px; box-shadow: 5px 10px 18px #888888;'>".$GroupList['GroupName']."</li>";
    

else

    $output.= "<li>No Group Found</li>";

$output .= "</ul>";
echo $output;

else

    echo "Unautorizarion Error !!";

?>

输入字段和自动完成区域：

<input autocomplete="off" class="input--style-5" type="text" name="studentname" id="studentname"> <!--Student Field-->
<div style="" id="students" name="students"></div> <!--Auto Complete Area Div-->

<input autocomplete="off" class="input--style-5" type="text" id="groupname" name="groupname"><!--Group Field-->
<div id="groups" name="groups"></div><!--Autocomplete area-->

【问题讨论】：

你错过关闭（>）输入groupname。这是一个问题还是只是复制/粘贴错误。

复制粘贴错误

我也更新了

【参考方案1】：

以下两个块是你的问题，它们都响应点击任何li

        $(document).on('click','li',function()
        
           $('#studentname').val($(this).text());
           $('#students').fadeOut();
        );


        $(document).on('click','li',function()
        
           $('#groupname').val($(this).text());
           $('#groups').fadeOut();
        );

您需要调整您的选择器以针对相应的列表，如下所示：

        $(document).on('click','#students li',function()
        
           $('#studentname').val($(this).text());
           $('#students').fadeOut();
        );


        $(document).on('click','#groups li',function()
        
           $('#groupname').val($(this).text());
           $('#groups').fadeOut();
        );

或者像这样：

        $('#students').on('click','li',function()
        
           $('#studentname').val($(this).text());
           $('#students').fadeOut();
        );


        $('#groups').on('click','li',function()
        
           $('#groupname').val($(this).text());
           $('#groups').fadeOut();
        );

【参考方案2】：

您的选择器在“on”功能中不够具体。试试：

$(document).on('click', '#students li', function()
    $('#studentname').val($(this).text());
    $('#students').fadeOut();
);

和：

$(document).on('click', '#groups li', function()
    $('#groupname').val($(this).text());
    $('#groups').fadeOut();
);

相反。希望这可以帮助。干杯。

【讨论】：

你刚才重复了我的回答

是的，很抱歉我在您提交之前就开始输入了，直到我提交后您的答案才出现。对您的回答表示赞赏。