利用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中根据IP地址判断城市实现城市切换或跳转代码
Sep 04 PHP
PHP set_error_handler()函数使用详解(示例)
Nov 12 PHP
php堆排序(heapsort)练习
Nov 13 PHP
php指定函数参数默认值示例代码
Dec 04 PHP
PhpDocumentor 2安装以及生成API文档的方法
May 21 PHP
Laravel 5框架学习之环境与配置
Apr 08 PHP
WIN8.1下搭建PHP5.6环境
Apr 29 PHP
wamp服务器访问php非常缓慢的解决过程
Jul 01 PHP
ThinkPHP安装和设置
Jul 27 PHP
php_pdo 预处理语句详解
Nov 21 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
Sep 27 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php上传文件常见问题总结
2015/02/03 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
js自定义回调函数
2015/12/13 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
Python性能优化技巧
2015/03/09 Python
python如何生成网页验证码
2018/07/28 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
单位人事专员介绍信
2014/01/11 职场文书
产品促销活动策划书
2014/01/15 职场文书
承诺书范本
2015/01/21 职场文书
社区党建工作总结2015
2015/05/13 职场文书
单位更名证明
2015/06/18 职场文书
自考生自我评价
2019/06/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android