PHP+JS实现的实时搜索提示功能


Posted in PHP onMarch 13, 2018

本文实例讲述了PHP+JS实现的实时搜索提示功能。分享给大家供大家参考,具体如下:

效果图如下:

PHP+JS实现的实时搜索提示功能

代码如下:

HTML代码:(该代码用两种方法实现,一种Jquery,一种原生JS)

<html>
<head>
  <script src="/DelphiRequest/search/js/jquery.js"></script>
  <script>
/*用原生js实现
//    function showResult(str)
//    {
//      if (str.length==0)
//      {
//        document.getElementById("livesearch").innerHTML="";
//        document.getElementById("livesearch").style.border="0px";
//        return;
//      }
//      if (window.XMLHttpRequest)
//      {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
//        xmlhttp=new XMLHttpRequest();
//      }
//      else
//      {// IE6, IE5 浏览器执行
//        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//      }
//      xmlhttp.onreadystatechange=function()
//      {
//        if (xmlhttp.readyState==4 && xmlhttp.status==200)
//        {
//          document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
//          document.getElementById("livesearch").style.border="1px solid #A5ACB2";
//        }
//      }
//      xmlhttp.open("GET","livesearch.php?q="+str,true);
//      xmlhttp.send();
//    }
*/
//用jquery实现
     function showResult(str){
       $.ajax({
         type: "GET",
         url : "livesearch.php",
         datatype : 'json',
         data: {'q':str} ,
         success :function (data) {
           document.getElementById("livesearch").innerHTML=data;
           document.getElementById("livesearch").style.border="1px solid #A5ACB2";
         }
       })
     }
  </script>
</head>
<body>
<form>
  <input type="text" size="30" onkeyup="showResult(this.value)">
  <div id="livesearch"></div>
</form>
</body>
</html>

PHP代码如下:(PHP不仅可以考虑直接使用数组,也可以考虑直接查询数据库,获取数据库内容,本代码使用的是数组。)

<?php
$provinces=array("beijing","tianjin","shanghai","chongqing","hebei","henan","heilongjiang","jilin","changchun",
  "shandong","anhui","shanxi","guangzhou","yunnan","hainan","xizang","qinghai","fujian","guizhou","jiangsu",
  "zhejiang","guangzhou","yunan","hainan","xizang","neimenggu","sichuan","gansu","ningxia","xianggang","aomen");
$tmp=$_GET['q'];
$val=array();
$k=0;
if (strlen($tmp)>0)
{
  for($i=0;$i<31;$i++){
    if(strpos($provinces[$i],$tmp)!==false){
       //传递值给val
       $val[$k]=$provinces[$i];
       //下标增加
       $k=$k+1;
    }
  }
  //遍历val数组
  for($j=0;$j<count($val);$j++)
  {
    echo $val[$j];
    echo "<br>";
  }
}
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
PHP文件上传实例详解!!!
Jan 02 PHP
深入理解PHP中的Session和Cookie
Jun 21 PHP
浅析十款PHP开发框架的对比
Jul 05 PHP
测试php函数的方法
Nov 13 PHP
解决php接收shell返回的结果中文乱码问题
Jan 23 PHP
CodeIgniter中实现泛域名解析
Jul 19 PHP
php中将一段数据存到一个txt文件中并显示其内容
Aug 15 PHP
php显示指定目录下子目录的方法
Mar 20 PHP
PHP实现的敏感词过滤方法示例
Mar 06 PHP
mongodb和php的用法详解
Mar 25 PHP
PHP进阶学习之命名空间基本用法分析
Jun 18 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
Oct 28 PHP
PHP实现的简单路由和类自动加载功能
Mar 13 #PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
Mar 12 #PHP
php把字符串指定字符分割成数组的方法
Mar 12 #PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
Mar 12 #PHP
php取出数组单个值的方法
Mar 12 #PHP
php合并数组并保留键值的实现方法
Mar 12 #PHP
php删除二维数组中的重复值方法
Mar 12 #PHP
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
一个数据采集类
2007/02/14 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
基于empty函数的输出详解
2013/06/17 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python创建子类的方法分析
2019/11/28 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
.net开发工程师面试题
2014/02/25 面试题
设计师求职信模板
2014/05/06 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
python3 sqlite3限制条件查询的操作
2021/04/07 Python