javascript - Ajax自动完成功能以相同的值填充两个输入字段,尽管我已经用不同的逻辑分别实现了这两个功能

我有2个输入字段

  1. 学生姓名输入栏
  2. 组名输入字段

我实现了2种不同的Ajax逻辑,以分别在不同标签中的文本框中获取学生和组的列表,以实现自动完成。

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

图片: 组列表

图片: 两个字段都填满了

获取学生的代码(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-->

下面的两个块是你的问题,他们对任何一个点击皆响应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();
        });

选择器在“ 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();
});

代替。 希望这可以帮助。 干杯。

转载请注明来自askonline.tech,本文标题:javascript - Ajax自动完成功能以相同的值填充两个输入字段,尽管我已经用不同的逻辑分别实现了这两个功能


 Top