thinkphp+mysql+ajax文本框如何自动补齐

Question

如图效果，在thinkphp+mysql+ajax文本框如何自动补齐，求指教！最好有代码案例。

Answer 1

在 ThinkPHP + MySQL + Ajax 中实现文本框自动补齐，可以使用 jQuery UI 中的 Autocomplete 组件。以下是具体步骤：

1. 引入 jQuery 和 jQuery UI 库：

   <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   

2. 创建文本框：

   <input type="text" id="myinput" name="myinput">
   

3. 初始化 Autocomplete 组件：

   $(document).ready(function() {
     $('#myinput').autocomplete({
       source: function(request, response) {
         $.ajax({
           url: '/myurl',  // 替换成实际的 URL
           type: 'POST',
           dataType: 'json',
           data: {
             term: request.term
           },
           success: function(data) {
             response(data);
           }
         });
       },
       minLength: 1
     });
   });
   

   上述代码中，source 参数指定了获取数据的 URL，minLength 参数指定了输入的最小长度。在输入框中输入字符时，Autocomplete 组件会向指定的 URL 发送 AJAX 请求，并将输入的字符作为参数传递过去。服务器端根据参数查询数据库，并将查询结果返回给客户端。客户端接收到数据后，将其显示在 Autocomplete 组件下拉框中。

4. 服务器端处理 AJAX 请求：

   在服务器端，需要根据传递过来的参数查询数据库，并将查询结果返回给客户端。以下是一个示例代码：

   public function myurl() {
     $term = input('post.term');  // 获取输入的字符
     $result = Db::name('mytable')
                  ->field('myfield')
                  ->where('myfield', 'like', '%' . $term . '%')
                  ->select();  // 查询数据库
     $data = [];
     foreach ($result as $row) {
       array_push($data, $row['myfield']);
     }
     return json_encode($data);  // 返回查询结果
   }
   

   上述代码中，mytable 和 myfield 分别替换成实际的表名和字段名。根据输入的字符，使用 LIKE 运算符查询数据库，并将查询结果格式化为一个数组，然后将其转换为 JSON 格式，并返回给客户端。

通过以上步骤，就可以在 ThinkPHP + MySQL + Ajax 中实现文本框自动补齐了。