利用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 相关文章推荐
桌面中心(一)创建数据库
Oct 09 PHP
PHP数据库调用类调用实例(详细注释)
Jul 12 PHP
php中使用临时表查询数据的一个例子
Feb 03 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
Dec 03 PHP
PHP对象相互引用的内存溢出实例分析
Aug 28 PHP
从性能方面考虑PHP下载远程文件的3种方法
Dec 29 PHP
抛弃 PHP 代价太高
Apr 26 PHP
php简单的上传类分享
May 15 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
Apr 20 PHP
基于Laravel 多个中间件的执行顺序详解
Oct 21 PHP
Laravel监听数据库访问,打印SQL的例子
Oct 24 PHP
使用PHP开发留言板功能
Nov 19 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python基础知识_浅谈用户交互
2017/05/31 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python代码需要缩进吗
2020/07/01 Python
Linux文件操作命令都有哪些
2015/02/27 面试题
致200米运动员广播稿
2014/02/06 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
应届生求职信
2014/05/31 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js