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多用户计数器代码
Mar 11 PHP
PHP中文分词的简单实现代码分享
Jul 17 PHP
php中批量修改文件后缀名的函数代码
Oct 23 PHP
PHP代码审核的详细介绍
Jun 13 PHP
PHP数据库链接类(PDO+Access)实例分享
Dec 05 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
Mar 05 PHP
php基于curl实现的股票信息查询类实例
Nov 11 PHP
php 微信开发获取用户信息如何实现
Dec 13 PHP
PHP搭建大文件切割分块上传功能示例
Jan 04 PHP
thinkPHP5.0框架API优化后的友好性分析
Mar 17 PHP
yii2.0框架场景的简单使用示例
Jan 25 PHP
TP5框架实现一次选择多张图片并预览的方法示例
Apr 04 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP加密解密实例分析
2015/12/25 PHP
php之可变函数的实例详解
2017/09/13 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python读取注册表中值的方法
2013/04/08 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python3.4爬虫demo
2019/01/22 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
经典c++面试题五
2014/12/17 面试题
元旦晚会邀请函
2014/01/27 职场文书
母婴店促销方案
2014/03/05 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
入伍通知书
2015/04/23 职场文书
个人承诺书格式范文
2015/04/29 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS