Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
662 views
in Technique[技术] by (71.8m points)

javascript - Ajax自动完成功能以相同的值填充两个输入字段,尽管我已经用不同的逻辑分别实现了这两个功能(Ajax Autocomplete filling up both input fierlds witth same value, although I have implemented both functions separately with different logic)

I have 2 input fields(我有2个输入字段)

Student Name Input Field(学生姓名输入栏) Group Name Input Field(组名输入字段) I have implemented 2 different ajax logic to fetch list of students and groups for autocomplete in textboxes separately in different tag.(我实现了2种不同的Ajax逻辑,以分别在不同标签中的文本框中获取学生和组的列表,以实现自动完成。) But when I click one value from any autocomplete value either student list or group list, both input fields are being filled up with selected value(但是,当我从学生列表或小组列表的任何自动完成值中单击一个值时,两个输入字段都被所选值填充) Image : Group List(图片: 组列表) Image: Both fields are filling up(图片: 两个字段都填满了) Code for fetch Student (JavaScript) :(获取学生的代码(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> Code for Fetch Group (JavaScript):(提取组(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 Code (SearchStudent.php):(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 Code (SearchGroup.php):(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 Fields & Autocomplete area :(输入字段和自动完成区域:) <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-->   ask by Rishav Mandl translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The following two blocks are your problem, they both respond to a click on any li(下面的两个块是你的问题,他们对任何一个点击皆响应li)

$(document).on('click','li',function() { $('#studentname').val($(this).text()); $('#students').fadeOut(); }); $(document).on('click','li',function() { $('#groupname').val($(this).text()); $('#groups').fadeOut(); }); You need to adjust your selectors to target the respective lists as follows:(您需要按以下方式调整选择器以定位相应的列表:) $(document).on('click','#students li',function() { $('#studentname').val($(this).text()); $('#students').fadeOut(); }); $(document).on('click','#groups li',function() { $('#groupname').val($(this).text()); $('#groups').fadeOut(); }); Or like this:(或像这样:) $('#students').on('click','li',function() { $('#studentname').val($(this).text()); $('#students').fadeOut(); }); $('#groups').on('click','li',function() { $('#groupname').val($(this).text()); $('#groups').fadeOut(); });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...