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 删除无限级目录与文件代码共享
Nov 22 PHP
php设计模式 State (状态模式)
Jun 26 PHP
php中数组首字符过滤功能代码
Jul 31 PHP
php与java通过socket通信的实现代码
Oct 21 PHP
php检测用户是否用手机(Mobile)访问网站的类
Jan 09 PHP
php的array数组和使用实例简明教程(容易理解)
Mar 20 PHP
PHP缓存集成库phpFastCache用法
Dec 15 PHP
php运行时动态创建函数的方法
Mar 16 PHP
深入浅析php中sprintf与printf函数的用法及区别
Jan 08 PHP
Zend Framework连接Mysql数据库实例分析
Mar 19 PHP
基于ThinkPHP5.0实现图片上传插件
Sep 25 PHP
Laravel中GraphQL接口请求频率实战记录
Sep 01 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
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python修改注册表终止360进程实例
2014/10/13 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
常见python正则用法的简单实例
2016/06/21 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
九年级英语教学反思
2014/01/31 职场文书
离婚案件被告代理词
2015/05/23 职场文书
师范生小学见习总结
2015/06/23 职场文书
初中政治教师教学反思
2016/02/23 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python