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 相关文章推荐
实用函数4
Nov 08 PHP
PHP集成FCK的函数代码
Sep 27 PHP
简化php模板页面中分页代码的解析
Feb 06 PHP
PHP session有效期问题
Apr 26 PHP
PHP中文件缓存转内存缓存的方法
Dec 06 PHP
php中解析带中文字符的url函数分享
Jan 20 PHP
Centos6.5和Centos7 php环境搭建方法
May 27 PHP
PHP自定义函数格式化json数据示例
Sep 14 PHP
PHP结合Ueditor并修改图片上传路径
Oct 16 PHP
PHP内置加密函数详解
Nov 20 PHP
php微信开发之谷歌测距
Jun 14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
Oct 14 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
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
PHP时间类完整代码实例
2021/02/26 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JavaScript错误处理
2015/02/03 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python写的一个简单监控系统
2015/06/19 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Pygame框架实现飞机大战
2020/08/07 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
上班睡觉检讨书
2014/01/09 职场文书
海飞丝广告词
2014/03/20 职场文书
诚信考试承诺书
2014/03/27 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
如何用python反转图片,视频
2021/04/24 Python