利用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 相关文章推荐
字母顺序颠倒而单词顺序不变的php代码
Aug 08 PHP
使用PHP获取当前url路径的函数以及服务器变量
Jun 29 PHP
php读取文件内容的方法汇总
Jan 24 PHP
php数组生成html下拉列表的方法
Jul 20 PHP
php处理复杂xml数据示例
Jul 11 PHP
Yii2实现上下联动下拉框功能的方法
Aug 10 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
Oct 18 PHP
YII框架中搜索分页jQuery写法详解
Dec 19 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
Dec 23 PHP
PHP调用API接口实现天气查询功能的示例
Sep 21 PHP
PHP随机数函数rand()与mt_rand()的讲解
Mar 25 PHP
PHP实现一个按钮点击上传多个图片操作示例
Jan 23 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
Dedecms常用函数解析
2008/02/01 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
python地震数据可视化详解
2019/06/18 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
观后感格式
2015/06/19 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android