javascript - 当用户在表单上的文本框中键入内容时如何显示建议或相关名称

Question

我有一个 PHP 和 JavaScript 的小项目，用于在 MySql 数据库上注册学生，它做得很完美，但是当用户在上面搜索/输入特定名称时，我需要，例如，如果他/她输入像“John”这样的名称它必须显示与字母“J”相关的名称的下拉列表，我尝试过，但不起作用。我将逐步向您展示我所做的事情。

1:这是用户用来输入学生分数的html表单，字段名称是我想要的地方，当用户在文本框中输入名称时，它必须显示相关名称:

注意:我将向您展示几个字段。

<form action="#" method="POST" id="name" name="name"   
enctype="multipart/form-
data">
 <div class="row">
<div class="col-sm-6">
    <div class="panel panel-default">

    <div class="panel-body">
    <div class="form_sep">
        <label for="reg_input_name" class="req">Admition Number</label>
         <input type="text" id="idnum" name="idnum" class="form-control"    
            data-required="true" >
        </div>
        <div class="form_sep">
       <label for="reg_textarea_message" class="req">Name</label>
        <input type="text"  name="name" id="name" cols="30" rows="4"  
           class="form-control"></div>
       </div>
        </div>
         </div></div></form>

2:这是 JavaScript 代码和 jQuery 插件，我将其放在同一个 html 表单上。

<script src="../jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.get('getStudents.php', function(data){
            var students = JSON.parse(data);

            $('#name').autocomplete({
                source: students
            });

        });

    });
</script>

3:这是 PHP (getStudents.php) 文件。

<?php
include_once "db_connect.php";

 $sql = "SELECT * FROM student_reg";
  $res = mysql_query($sql);
   if($res){
  $students = array();
   while($r = mysql_fetch_array($res)){
    $students[] = $r['sname'];
    }
  echo json_encode($students);
    }else{
  echo mysql_error();
    }
 ?>

注意:当我在 php 文件上测试/回显其自身时，它会显示所有名称，但是当我将光标放在“名称”文本字段上并键入时，它不会显示我喜欢的下拉建议名称。

Answer 1

只是一个想法，但我建议您查看数据表( https://www.datatables.net/ )。它可能有一些对您的应用程序非常有用的应用程序。搜索功能的功能非常接近我所希望的。这是一个非常基本的示例，其中提供了可用的搜索功能。( https://www.datatables.net/examples/basic_init/zero_configuration.html )。