php搜索框提示(自动完成)示例代码

百度的搜索被所有人使用。用户输入字符时，搜索框下会自动提示相关信息，增强了用户体验。真的很好。那么这种效果是如何实现的呢？先看效果图，这样更有动力，不然还不知道我说的是什么，想达到什么样的效果！

首先说明原理：在search.html页面中，当用户在搜索框中输入“j”时，使用javascript获取搜索框的文本内容，在数据库中搜索相关内容并返回，然后使用javascript在搜索框下方的提示框中显示服务器返回的结果，供用户参考。具体实现方法：首先在页面中制作一个显示搜索提示的搜索框、搜索按钮和图层，如下所示：div id=' search ' input type=' text ' name=' k '/input type=' button ' name=' s ' value=' search '/div div id=' search _ auto '/div使用浏览器浏览页面。

它看起来很普通，没有风格。现在，进行一些样式调整# search { font-size :14 px；} #搜索。k { padding:2px 1px宽度width:320px}/*将搜索框的宽度设置得更大。WEB开发说明(www.chhua.com)*/调整显示搜索提示的图层的样式。由于搜索提示层就在搜索框下方，我们将其定位模式设置为绝对定位# search _ auto { border :1 pxsolid # 817 FB 2；位置：绝对；}/*设置边框和定位方式*/然后用JS将搜索提示层的位置放在搜索框正下方，宽度与搜索框相同。这里，我们使用jQuery来解决$ ('# search _ auto ')的问题。CSS({ ' width ' : $(' # search input[name=' k ']')。宽度()。搜索提示层的位置和宽度已经确定。由于这个提示框在用户输入搜索文本之前是不显示的，所以我们应该首先将其设置为隐藏，并在提示层的样式中添加display:none来隐藏它。一切都好。现在，只需在搜索框中注册onkeyup事件。我们仍然使用jQuery来处理它。在jQuery中，它是keyup $ ('# searchinput [name=' k']')。keyup (function () {$)。post ('search _ auto.php ')。{'value' : $ (this)。val ()}，function(data){//将帖子数据发送到服务器上的search_auto.php，$。post是if (data==' 0') $ ('# search _ auto ')的方法。html(“”)。//判断服务器返回的数据。如果等于0，则表示没有找到相关内容，所以清空提示框的内容，隐藏WEB开发笔记(www.chhua.com)*/else $(' # search _ auto ')。html(数据)。css ('display '，' block ')；//如果服务器返回的数据不等于0，则将返回的内容放入提示框，显示提示框})；});上面的客户端已经准备好了，可以将用户输入发送给服务器，并响应服务器的返回值。那么服务器如何处理客户端发送的数据呢？我们以PHP为例。PHP $ v=$ _ POST[value]；$ re=MySQL _ query(' select * from test，其中像“%$v%”这样的标题按addtime desc限制10排序')；//根据客户端发送的数据，在数据库中查询10个相关结果if(MySQL _ num _ rows($ re)=0)exit(' 0 ')；//判断查询结果，如果没有相关结果，则直接返回0 echo‘ul’；while($ ro=MySQL _ fetch _ array($ re))echo ' lia href=' '。$ ro[标题]。/a/Li '；//输出查询得到的相关结果的标题。这个地方需要注意。由于jQuery的ajax技术返回的文本是UTF-8编码的，如果$ro[title]包含中文，一定要记得使用iconv或者PHP的其他函数将其转换为UTF-8编码，否则会在页面上看到一堆乱码echo ' lia href=' javascript:Onlick=' $ (this)。父项()。父项()。父项()。淡出(100)“关闭/a放大器；gt。/Li '；//输入关闭按钮，当用户不想看到提示层时，可以点击关闭。关闭按钮使用jQuery。说明当前点击的按钮是$(this)，继续向上寻找它的第三个父元素，这样它会逐渐消失。网络开发说明(www.chhua.com)*/echo '/ul '；现在服务器可以正确执行我们过去发送的数据并返回相应的结果，所以现在在搜索框中输入一个单词进行测试，但前提是你的数据库中一定有与这个单词相关的东西，否则你不会因为没有相关的提示内容而看到提示框，呵呵。

可是还有点美中不足，那就是提示框里面的内容不美观，和我们在百度搜索中看到的提示框相比，简直是太丑了，哈哈，不急，我们再用钢性铸铁来调整显示的效果# search _ auto李{后台： # FFF；向左文本对齐：} /*设置提示框内的里标签效果*/#搜索_自动李。cls { text-align : right} /*设置提示框内的关闭按钮效果*/#搜索_自动阿利{ display : blockpadd :5 px 6pxcursor : pointer指针；color: # 666} /*设置提示框内里标签下的a标签效果*/# search _ auto阿利：悬停{后台： # d8d 8d 8；文本装饰：无；color: # 000} /*当鼠标移入提示框内时的效果*/现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功能，留给朋友们自己开动脑筋了，大家也可以在下面回复你的想法，等等。客户端完整代码：html head style # search { font-size :14 px；} #搜索k { padding:2px 1px宽度width :320 px } # search _ auto { border :1 px solid # 817 FB2；位置：绝对；display : none } # search _ auto Li {后台： # FFF；向左文本对齐：} #搜索_自动李。cls { text-align : right} #搜索_自动阿利{ display : blockpadd :5 px 6pxcursor : pointer指针；color: # 666} # search _ auto阿利：悬停{背景： # d8d 8d 8；文本装饰：无；color : # 000 }/style title jquery PHP实现用户输入搜索内容时自动提示/title/head dydiv id=" search " input type=" text " name=" k "/input type=" button " name=" s " value="搜索"//div div id=" search _ auto "/div/body/html脚本src=" jquery。js/script script $(function(){ $(' # search _ auto ')).CSS({ ' width ' : $(' # search input[name=' k ']').宽度(){ 4 });$(' #搜索输入[name='k']').keyup(function(){$).post('search_auto.php '，{'value':$(this).val()}，函数（数据){if(数据==' 0 ')$(' # search _ auto ').html(").css('display '，' none ')；else $('#search_auto ').html(数据)。css('display '，' block ')；});});});/script服务器端完整代码：PHP $ v=$ _ POST[值]；$ re=MySQL _ query('从测试中选择*，其中像“%$v%”这样的标题按addtime desc限制10排序');if(MySQL _ num _ rows($ re)=0)exit(' 0 ')；回声ul '；while($ ro=MySQL _ fetch _ array($ re))echo ' lia href=' ' .$ ro[标题]。/a/李；echo ' lia href=' JavaScript : onclick=' $(this).父项()。父项()。父项()。淡出(100)关闭/a amp；gt ./李；echo '/ul '；