利用PHP+JS实现搜索自动提示(实例)


Posted in PHP onJune 09, 2013

我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制。

利用PHP+JS实现搜索自动提示(实例)

好,我们现在开始。
JavaScript代码 :

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $(‘#suggestions').hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $(‘#suggestions').show();
                $(‘#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup
function fill(thisValue) {
    $(‘#inputString').val(thisValue);
   $(‘#suggestions').hide();
}
</script>

JS的解释:
 好,从上面的代码看到,我们需要连接到一个叫做rpc.php的文件,这个文件处理所有的操作。
lookup函数使用从文本输入框中得到的单词然后使用jQuery中Ajax的方法POST把它传给rpc.php。
如果输入字符 ‘inputString'是‘0'(Zero,译注:在这里是指在搜索框中没输入任何内容),建议框就被隐藏,这也很人性化,你想,如果在搜索框中没有输入任何东西,你也不期望会出现个建议提示框。
如果输入框中有内容,我们就得到了这个 ‘inputString'并传递给rpc.php页面,然后jQuery 的$.post()函数被使用,如下:
$.post(url, [data], [callback])
‘callback'部分可以关联一个函数,这个比较有意思,只有在数据(data)被加载成功的时候才会执行(译注:此处为意译,没看懂原文:<).
如果返回的数据(data)不为空(也就是说,有东西要显示),那就显示搜索提示框并且使用返回的数据(data)来代替其中的html代码。
就这么简单!
PHP后台程序(rpc.php):
如你所知,我的php后台程序都叫做rpc.php(RPC指远程过程调用),而没用它实际执行的功能来命名,但是也还不错了。
// PHP5 Implementation - uses MySQLi.
$db = new mysqli(‘localhost', ‘root' ,”, ‘autoComplete');
if(!$db) {
    // Show error if we cannot connect.
    echo ‘ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST[‘queryString'])) {
        $queryString = $_POST[‘queryString'];
        // Is the string length greater than 0?
        if(strlen($queryString) >0) {
        // Run the query: We use LIKE ‘$queryString%'
        // The percentage sign is a wild-card, in my example of countries it works like this…
        // $queryString = ‘Uni';
        // Returned data = ‘United States, United Kindom';
        $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%' LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query ->fetch_object()) {
                // Format the results, im using <li> for the list, you can change it.          
                // The onClick function fills the textbox with the result.
                echo ‘<li onclick="fill('‘.$result->value.'‘);">'.$result->value.‘</li>';
            }
        } else {
            echo ‘ERROR: There was a problem with the query.';
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo ‘There should be no direct access to this script!';
}
}
?>

PHP代码解释 :
鉴于代码中我已经加了很多注释,在这里我就不再说的很详细了。
一般情况下,需要接收这个 ‘QueryString' 然后在其最后使用通配符产生一个查询语句。
这意味着在这种情况下,每次敲进去一个字符都需要产生一个查询语句,如果一直都这样做的话,恐怕MYSQL会受不了。但是为了尽量的简化这个过程,这种做法对一个规模较小的应用应该没什么问题。
这段php代码你需要在自己的系统中稍作修改,比如你需要更新‘$query'到你自己的数据库,需要看在哪里放你数据库表的列名等等。
CSS样式 :
我使用的是CSS3,天哪,它真的很好用,虽然在Firefox 或者Safari浏览器上会有功能限制。
<style type="text/css">
.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}
.suggestionList li:hover {
    background-color: #659CD8;
}
</style>

CSS代码都很标准,没什么需要特别指出的。
主文件HTML :
这是主文件的部分html代码,你需要添加的就是一个输入框,并且把 ‘onkeyup' 函数设置为lookup(this.value)。另外,我建议你不要修改它的ID,如果你不想修改上面的Javascript代码的话。
截图 :
我想你应该会想要看看最后的效果是什么样子,OK。

利用PHP+JS实现搜索自动提示(实例)

还有,

利用PHP+JS实现搜索自动提示(实例)

最后就是有用的链接了,我想你应该期待很久了。
源文件点击下载

PHP 相关文章推荐
一个图形显示IP的PHP程序代码
Oct 19 PHP
PHP取整数函数常用的四种方法小结
Jul 05 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
Jul 16 PHP
PHP中设置时区,记录日志文件的实现代码
Jan 07 PHP
用PHP来计算某个目录大小的方法
Apr 01 PHP
CodeIgniter启用缓存和清除缓存的方法
Jun 12 PHP
CodeIgniter中使用Smarty3基本配置
Jun 29 PHP
php实现的数字验证码及数字运算验证码
Jul 30 PHP
PHP微信支付实例解析
Jul 22 PHP
php和js实现根据子网掩码和ip计算子网功能示例
Nov 09 PHP
php实现图片压缩处理
Sep 09 PHP
如何在Mac上通过docker配置PHP开发环境
May 29 PHP
深入php处理整数函数的详解
Jun 09 #PHP
解决ajax+php中文乱码的方法详解
Jun 09 #PHP
PHP写的加密函数,支持私人密钥(详细介绍)
Jun 09 #PHP
PHP版 汉字转码的实现详解
Jun 09 #PHP
php批量上传的实现代码
Jun 09 #PHP
PHP转换IP地址到真实地址的方法详解
Jun 09 #PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
Jun 09 #PHP
You might like
具有时效性的php加密解密函数代码
2013/06/19 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python3常见函数range()用法详解
2019/12/30 Python
python实现银行实战系统
2020/02/26 Python
python asyncio 协程库的使用
2021/01/21 Python
大学生求职推荐信
2013/11/27 职场文书
农村婚礼证婚词
2014/01/10 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers