利用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 相关文章推荐
教你IIS6的PHP最佳配置方法
Sep 05 PHP
PHP:风雨欲来 路在何方?
Oct 09 PHP
Php图像处理类代码分享
Jan 19 PHP
PHP框架Laravel的小技巧两则
Feb 10 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
Apr 15 PHP
php如何实现只替换一次或N次
Oct 29 PHP
详解PHP实现定时任务的五种方法
Jul 25 PHP
php 生成签名及验证签名详解
Oct 26 PHP
PHP实现微信图片上传到服务器的方法示例
Jun 29 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
May 12 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
Dec 05 PHP
实例说明js脚本语言和php脚本语言的区别
Apr 04 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python3运算符常见用法分析
2020/02/14 Python
python烟花效果的代码实例
2020/02/25 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
金智子午JAVA面试题
2015/09/04 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
母亲节感恩活动记录
2014/03/16 职场文书
新学期标语
2014/06/30 职场文书
影视后期实训报告
2014/11/05 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
先进党支部事迹材料
2014/12/24 职场文书
旷工辞退通知书
2015/04/17 职场文书
婚礼答谢词范文
2015/09/29 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android