2023年7月9日发(作者：)

php点击按钮弹出搜索框,jquery+php实现搜索框⾃动提⽰jquery+php实现搜索框⾃动提⽰2018-12-30编程之家收集整理的这篇⽂章主要介绍了jquery+php实现搜索框⾃动提⽰，编程之家⼩编觉得挺不错的，现在分享给⼤家，也给⼤家做个参考。搜索热词今天突然想给本站做个搜索页⾯，这样⽤户可以通过搜索来找到⾃⼰喜欢的内容，也避免了在海量信息中⼿动查找资源的⿇烦，我的⽬标和百度⾸页的效果类似，当⽤户输⼊要搜索的⽂字时，我们在下⽅给出相关的⼗条信息，如果⽤户要找的就是这⼗条信息内的某⼀条，那么简单，直接点击就可在新页⾯中打开页⾯，主要就是想更⼈性化⼀点，让⽤户使⽤起来更⽅便。先看⼀下效果图吧，这样更有动⼒，要不然⼤家还不知道我在讲什么，到底要达到什么样的效果！jquery+PHP实现搜索框⾃动提⽰下⾯先主要讲解原理：在页⾯中，⽤户在搜索框内输⼊“j”时，使⽤javascript获取搜索框的⽂本内容，到数据库中查找相关的内容并返回，再使⽤javascript将服务器返回的结果显⽰在搜索框下⾯的提⽰框内，供⽤户参考选择。具体的实现⽅法：⾸先在页⾯中做好搜索框、搜索按钮、显⽰搜索提⽰的层，如下代码使⽤浏览器浏览页⾯，会看到下图的效果jquery+PHP实现⽤户输⼊搜索内容时⾃动提⽰看起来很普通，没什么样式，现在稍作样式上的调整搜索框宽度设置⼤点*/再将显⽰搜索提⽰的层样式调整⼀下，由于搜索提⽰层在搜索框正下⽅，所以我们设置其定位⽅式为绝对定位定位⽅式*/接着⽤JS将搜索提⽰层的位置放置在搜索框正下⽅，且宽度和搜索框相同，这⾥我们采⽤jQuery来解决@L_301_0@ 代码如下:40462">$('#search_auto').css({'width':$('#search input[name="k"]').width()+4});搜索提⽰层的位置和宽度已经确定好了，由于在⽤户没有输⼊搜索⽂字前这个提⽰框是不显⽰的，所以我们先要将它设置成隐藏，在提⽰层的样式⾥加上display:none将其隐藏。已经全部OK了，现在只要给搜索框的onkeyup注册事件即可，我们依然采⽤jQuery来处理，在jQuery中是keyupPHP',{'value':$(this).val()},function(data){　 //向服务器上的search_发送post数据，$.post是jQuery的⽅法if(data=='0') $('#search_auto').html('').css('display','none');　 //判断服务器上返回的数据，如果等于０，则表⽰没有找到相关的内容，所以将提⽰框的内容清空并隐藏else $('#search_auto').html(data).css('display','block');　 //如果服务器上返回的数据不等于０，则将返回的内容放到提⽰框内并显⽰提⽰框});});上⾯客户端已经做好了，已经可以将⽤户输⼊的内容发送到服务器端，并响应服务器的返回值。那么服务器端如何处理客户端发送来的数据呢，下⾯⽤PHP来举个例⼦PHP;">PHP$v=$_POST[value];$re=MysqL_query("select * from test where title like '%$v%' order by addtime desc limit 10");　 //根据客户端发送来的数据，到数据库中查询10条相关的结果if(MysqL_num_rows($re)<=0) exit('0');　 //判断查询结果，如果没有相关的结果，那么直接返回0echo '';while($ro=MysqL_fetch_array($re)) echo '';　 //将查询得到的相关结果的标题输出，这个地⽅需要注意，由于通过jQuery的ajax技术返回的⽂本是UTF-8编码，所以如果$ro[title]中包含中⽂，⼀定要记得⽤PHP的iconv或其它函数将其转换成UTF-8编码，否则在页⾯中看到的会是⼀串乱码echo '';　 //输⼊⼀个关闭按钮，让⽤户不想看到提⽰层时可以点击关闭，关闭按钮采⽤jQuery，解释⼀下，当前点击的按钮是$(this)，⼀直向上找到其第三个⽗元素，让它逐渐消失echo '';>现在服务器已经可以正确的执⾏我们发送过去的数据了，并且返回相应的结果，那么现在在搜索框内输⼊⼀个⽂字测试⼀下吧，但前提是你的数据库中得有与这个⽂字相关的内容啊，要不然你也看不到提⽰框的出现，因为没有相关提⽰内容啊，呵呵。可是还有点美中不⾜，那就是提⽰框⾥⾯的内容不美观，和我们在百度搜索中看到的提⽰框相⽐，简直是太丑了，哈哈，不急，我们再⽤css来调整显⽰的效果代码如下:提⽰框内的li标签效果*/#search_auto {text-align:right;} /*设置提⽰框内的关闭按钮效果*/#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*设置提⽰框内li标签下的a标签效果*/#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当⿏标移⼊提⽰框内时的效果*/现在才算是真正的完全制作完成，⾄于要不要设置⼀个延迟处理，或是其它更完善的功能，留给朋友们⾃⼰开动脑筋了，⼤家也可以在下⾯回复你的想法，等等。客户端完整代码：403_48@