php+jquery 实现搜索提示功能实例
今天突然想给本站做个搜索页面，这样用户可以通过搜索来找到自己喜欢的内容，也避免了在海量信息中手动查找资源的麻烦，我的目标和百度首页的效果类似，当用户输入要搜索的文字时，我们在下方给出相关的十条信息，如果用户要找的就是这十条信息内的某一条，那么简单，直接点击就可在新页面中打开页面，主要就是想更人性化一点，让用户使用起来更方便。
先看一下效果图吧，这样更有动力，要不然大家还不知道我在讲什么，到底要达到什么样的效果！
下面先主要讲解原理：
在search.html页面中，用户在搜索框内输入“j”时，使用javascript获取搜索框的文本内容，到数据库中查找相关的内容并返回，再使用javascript将服务器返回的结果显示在搜索框下面的提示框内，供用户参考选择。
具体的实现方法：
首先在页面中做好搜索框、搜索按钮、显示搜索提示的层，如下代码
| 代码如下 | 复制代码 |
|
<div id="search"> |
|
使用浏览器浏览页面，会看到下图的效果
看起来很普通，没什么样式，现在稍作样式上的调整
| 代码如下 | 复制代码 |
|
#search{font-size:14px;} |
|
再将显示搜索提示的层样式调整一下，由于搜索提示层在搜索框正下方，所以我们设置其定位方式为绝对定位
| 代码如下 | 复制代码 |
|
#search_auto{border:1px solid #817FB2; position:absolute;} /*设置边框、定位方式*/ |
|
接着用JS将搜索提示层的位置放置在搜索框正下方，且宽度和搜索框相同，这里我们采用jQuery来解决
| 代码如下 | 复制代码 |
|
$(‘#search_auto’).css({‘width’:$(‘#search input[name="k"]‘).width()+4}); |
|
搜索提示层的位置和宽度已经确定好了，由于在用户没有输入搜索文字前这个提示框是不显示的，所以我们先要将它设置成隐藏，在提示层的样式里加上display:none将其隐藏。
已经全部OK了，现在只要给搜索框的onkeyup注册事件即可，我们依然采用jQuery来处理，在jQuery中是keyup
| 代码如下 | 复制代码 |
|
$('#search input[name="k"]').keyup(function(){ |
|
上面客户端已经做好了，已经可以将用户输入的内容发送到服务器端，并响应服务器的返回值。
那么服务器端如何处理客户端发送来的数据呢，下面用PHP来举个例子
| 代码如下 | 复制代码 |
|
<?php |
|
现在服务器已经可以正确的执行我们发送过去的数据了，并且返回相应的结果，那么现在在搜索框内输入一个文字测试一下吧，但前提是你的数据库中得有与这个文字相关的内容啊，要不然你也看不到提示框的出现，因为没有相关提示内容啊，呵呵。
可是还有点美中不足，那就是提示框里面的内容不美观，和我们在百度搜索中看到的提示框相比，简直是太丑了，哈哈，不急，我们再用css来调整显示的效果
| 代码如下 | 复制代码 |
|
#search_auto li{background:#FFF; text-align:left;} /*设置提示框内的li标签效果*/ |
|
现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功能，留给朋友们自己开动脑筋了，大家也可以在下面回复你的想法，等等。
客户端完整代码：
| 代码如下 | 复制代码 |
|
<html> <body> <script src="jQuery.js"></script> $('#search_auto').css({'width':$('#search input[name="k"]').width()+4}); }); |
|
服务器端完整代码：
| 代码如下 | 复制代码 |
|
<?php |
|
方法二，使用jquery.input_complete插件了，这个非常简单
例
| 代码如下 | 复制代码 |
|
<link rel="stylesheet" href="/css/v2/jquery.input_complete.css" type="text/css" /> <script type="text/javascript"> |
|
html只要简单的
| 代码如下 | 复制代码 |
|
<input type="text" id="tt" class="sel_quy" autocomplete="off" /> |
|
注意这里在里的ID必须TT哦，这个你可以自己定义名字，同时jquery.input_complete插件与jquery大家自己去下载吧。
在php上传文件或图片时我们会碰到要限制上传文件的类型，如果我们单只限制后缀名是很容易给绕过去的，下面我找了一些后辍名对应mine对照表，希望对大家有帮助。使用PHP脚本上传文件时需要将文件格式处理为PHP所认识的文件类型，例如（.jpg的文件格式为image/jpeg）。这个格式的判断首先是由浏览器完成的，浏览器通过表单的提交判断是某类文件，再提交给php进行处理。
有时候不同浏览器对文件类型的定义不相同，因此有时候需要对不同的浏览器做判断。其实可以将不同浏览器的类型都加入到判断中。
下面提供一张IE和火狐浏览器的文件类型对照表：
| ie | 火狐 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
下面看一个实例
| 代码如下 | 复制代码 |
|
$temppath=$upfile['tmp_name']; |
|
上面实例就限制了只能上传doc,docx,xls,pdf,ppt了，这样如果有人想利用后缀名上传其它如php或asp文件就存在会提示上传文件不合法。
在网上找到了很多关于php截取中文方法，其中最多的还是讲到使用mb_substr函数来截取了，这个函数需要php.ini中一个拓展支持，但我没权限修改只有另想办法。substr截取
substr() 函数返回字符串的一部分。
| 代码如下 | 复制代码 |
| <?php $rest = substr("我是中国人", -1); // returns "乱码" echo $rest.'<br />'; $rest = substr("abcdef", -2); // returns "ef" echo $rest.'<br />'; $rest = substr("abcdef", -3, 1); // returns "d" echo $rest.'<br />'; ?> |
|
接着百度goole说可以mb_substr截取
| 代码如下 | 复制代码 |
|
|
|
运行机制提示
Fatal error: Call to undefined function mb_substr()...
后来有朋友告诉我是一般的服务器都没打开php_mbstring.dll，需要在php.ini中把php_mbstring.dll打开,找到idc商不开，只有另想办法
| 代码如下 | 复制代码 |
|
function msubstr($str, $start=0, $length, $charset="utf-8", $suffix=true) |
|
这个正好解决了所有问题了，看上是按字符编码来进行截取了
在php中默认时区与中国相关8小时了，下面我来给大家介绍在于linux中与windows系统解决php时差8小时的方法，希望对各位同学有帮助。大陆内地可用的值是：Asia/Chongqing ，Asia/Shanghai ，Asia/Urumqi （依次为重庆，上海，乌鲁木齐）
港台地区可用：Asia/Macao ，Asia/Hong_Kong ，Asia/Taipei （依次为澳门，香港，台北）
还有新加坡：Asia/Singapore
其他可用的值是：Etc/GMT-8 ，Singapore ，Hongkong ，PRC
一，Linux设置时区，以CentOS5.5为例：
| 代码如下 | 复制代码 |
|
cp -f /usr/share/zoneinfo/Asia/Shanghai /etc/localtime |
|
2. MySQL中设置时区
编辑MySQL配置文件：my.cnf/my.ini，在[mysqld]下加上：
| 代码如下 | 复制代码 |
|
default-time-zone = '+8:00' |
|
实际上，如果MySQL所在OS的时区已经设置正确，则可以不用在MySQL中设置时区，因为MySQL服务启动的时候，会自动采用OS的时区。
3. PHP中设置时区
在PHP配置文件PHP.ini中：
| 代码如下 | 复制代码 |
|
date.timezone = "Asia/Shanghai" |
|
设置好后，最好重启下系统。
如果是购买的Web空间，没有权限在Linux PHP MySQL中配置时区。那也好办，只需要在PHP脚本中设置和OS对应的时区，因为MySQL中默认使用的是OS的时区。假设OS的时区是'Asia/Shanghai'，使用下面两条语句其中之一即可：
| 代码如下 | 复制代码 |
|
ini_set('date.timezone', 'Asia/Shanghai'); date_default_timezone_set('Asia/Shanghai'); |
|
二，windows中我们要在PHP.INI中设置时区
| 代码如下 | 复制代码 |
|
date.timezone = PRC |
|
在代码中设置时区
| 代码如下 | 复制代码 |
|
2 date_default_timezone_set('Asia/Chongqing');//其中Asia/Chongqing'为“亚洲/重庆” 3 date_default_timezone_set('PRC');//其中PRC为“中华人民共和国” 4i ni_set('date.timezone','Etc/GMT-8'); 5 ini_set('date.timezone','PRC'); 6 ini_set('date.timezone','Asia/Shanghai'); 7 ini_set('date.timezone','Asia/Chongqing'); |
|
以上七种方法，任意一个都可以满足我们需求。
系统初始化时，加上
| 代码如下 | 复制代码 |
|
ini_set('date.timezone','Asia/Shanghai'); |
|
就将解决时区相差8
我们有时要去掉utf8文档中头部我们经常会需要手工清除了，下面我整理了几个利用php程序清除 utf8格式文件中的bom头部方法，希望对各位同学会有所帮助。例1
| 代码如下 | 复制代码 |
|
/** /** |
|
例2
如何将带有BOM文件的格式转换成无签名的UTF-8格式文件呢？下面分享给大家一段PHP代码：
| 代码如下 | 复制代码 |
|
<?php //此文件用于快速测试UTF8编码的文件是不是加了BOM，并可自动移除 $basedir="."; //修改此行为需要检测的目录，点表示当前目录 //以下不用改动 if ($dh = opendir($basedir)) { function checkBOM ($filename) { function rewrite ($filename, $data) {
|
|
例3
| 代码如下 | 复制代码 |
|
|
|
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-10
- 最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30
- 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:...2016-07-25- jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 复制代码 代码如下: *{ mar...2013-10-13
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23