php+js+mysql实现实时搜索

最新推荐文章于 2021-06-10 19:52:36 发布

wx不存在

最新推荐文章于 2021-06-10 19:52:36 发布

阅读量723

点赞数

分类专栏：前端文章标签： jquery javascript css html

本文链接：https://blog.youkuaiyun.com/weixin_39190732/article/details/105602206

版权

本文通过结合PHP、JavaScript和MySQL，详细介绍了如何实现实时搜索功能。首先展示了HTML界面的设计，接着讲解了CSS样式以美化搜索框。然后，重点分析了JavaScript代码如何监听输入并发送Ajax请求。最后，解释了PHP后端如何处理请求，从MySQL数据库中检索匹配数据并返回给前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<div class="layui-form-item">
	<label class="layui-form-label">用户名：</label>
	<div class="layui-input-inline">
		<input type="text" name="username" id="username"   value="" placeholder="用户名"  >
	    <ul class="list"></ul>
	</div>
</div>

css代码

.list {
	  width:100%;
	  text-align:left;
	  border:#ccc 1px solid;
	  font-size:14px;
	  margin:0 auto;
	  background:#FFF;
	  position:relative;
	}

js代码

//实时搜索
	$('#username').keyup(function(){
		$.post('<{:U("Order/searchIntime")}>',{'key':$(this).val()},function(data){　 
		if(data.flag){
		   //清空ul中的数据并显示
		   $(".list").empty();
		   $('.list').css('display','block');
		   // 循坏遍历返回值,并添加到li中
		   $(data.data).each(