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网站提速三大“软”招
Oct 09 PHP
消息持续发送的完整例子
Oct 09 PHP
PHP网站基础优化方法小结
Sep 29 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
Aug 07 PHP
PHPWind 发帖回帖Api PHP版打包下载
Feb 08 PHP
php中将时间差转换为字符串提示的实现代码
Aug 08 PHP
php数组合并array_merge()函数使用注意事项
Jun 19 PHP
php获取本周星期一具体日期的方法
Apr 20 PHP
php实现的简易扫雷游戏实例
Jul 09 PHP
php简单随机字符串生成方法示例
Apr 19 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
Nov 25 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
Sep 26 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JS打印组合功能
2016/08/04 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
酒店实习个人鉴定
2013/12/07 职场文书
中学自我评价
2014/01/31 职场文书
护士在校生自荐信
2014/02/01 职场文书
中班开学寄语
2014/04/04 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
入股协议书范本
2014/11/01 职场文书
患者身份识别制度
2015/08/06 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript