PHP MySQL Jquery 实现简易的检索自动补全提示功能
近段时间看了一些关于php页面input标签实现简易的自动检索补全功能，发现大部分实现的过程都比较复杂。这是一个简单的功能，可以动手试一下。思路比较常规，需要说明的是本实例中没有提示内容绑定键盘事件，仅可用鼠标操作。
html JQ内容如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>检索</title></head> <style type='text/css'> #autoBox { margin: 0px; padding: 0px; border: 1px solid #CCCCCC; width: 176px; } #autoBox li { clear: both; background-color: white; color: black; position: relative; top: 0px; left: 0px; line-height: 25px; width:175px; text-align: left; overflow: hidden; } #autoBox li:hover { background-color: gray; color: yellow; cursor: pointer; } </style> <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> <script type='text/javascript'> $(function(){ $.ajaxSetup({cache:false}) ; //不缓存 //以下代码用于显示检索提示框 $('#autoBox').hide(); //初始化时隐藏补全提示框 $('#stuSearch').keyup(function(){ //输入框中的keyup事件激活以下查询行为 $('#autoBox').html(''); //先清空补全提示框原有内容 if($('#stuSearch').val().length>0) // 如果输入框不为空 { $.ajax({ //后台调用php文件进行查询 type:'post', url:'./test.php', dataType:'json', data:{keywords:$('#stuSearch').val()}, success:function(feedbackdata) { $('#autoBox').show();// 显示补全提示框 for(i=0;i<feedbackdata.length;i ) //将结果添加到提示框中 { $('#autoBox').append('<li>' feedbackdata[i]['username'] '</li>'); } $('#autoBox li').on('click',function(){ //为这些新增的li绑定单击事件，单击后将其值赋到输入框中 $('#stuSearch').val($(this).text()); }) // $('#autoBox').append('<li style='text-align:right'>关闭</li>');//在提示框的最后添加一个li用来关闭 $('#autoBox li:last').on('click',function(){ // 添加单击事件，单击后隐藏提示框 $('#autoBox').hide(); }) } }); } }) }) </script></head><body><input type='text' placeholder='请输入检索关键字。' id='stuSearch' name='stuSearch'/><ul id='autoBox'></ul></body></html>test.php代码
<?php/** * Created by PhpStorm. * User: Sangfor * Date: 2021/10/11 * Time: 10:36 */// 假定数据库用户名：root，密码：123456，数据库：RUNOOB$con = mysqli_connect('localhost', 'root', '123456', 'RUNOOB');###########################北京-北环中心######################## 查询北京-北环中心 显示器总量 zclx为资产类型 bm为地区（部门）$keywords = $_POST['keywords'];$sql='SELECT * FROM yonghu WHERE username LIKE ''.$keywords.'%'';$myrs = mysqli_query($con, $sql);# $myrs=mysqli_query($con,'SELECT * FROM user WHERE username LIKE ''.$keywords.'%'');//var_dump($myrs);if ($myrs) { while ($row = mysqli_fetch_array($myrs)) { $temp[] = $row; } echo(json_encode($temp));}?>效果图：
输入前显示效果
输入后显示效果
赞 (0)