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+dbfile开发小型留言本
Oct 09 PHP
php FPDF类库应用实现代码
Mar 20 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
Oct 19 PHP
php生成略缩图代码
Jul 16 PHP
PHP数组传递是值传递而非引用传递概念纠正
Jan 31 PHP
CI框架简单邮件发送类实例
May 18 PHP
深入理解PHP 数组之count 函数
Jun 13 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
Sep 30 PHP
ThinkPHP发送邮件示例代码
Oct 08 PHP
PHP多维数组指定多字段排序的示例代码
May 16 PHP
PHP赋值的内部是如何跑的详解
Jan 13 PHP
PHP操作路由器实现方法示例
Apr 27 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python处理Excel文件实例代码
2017/06/20 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python读取图片任意范围区域
2019/01/23 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
如何在pycharm中安装第三方包
2020/10/27 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
七年级地理教学反思
2014/01/26 职场文书
关于运动会的稿件
2014/02/02 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
教师自我剖析材料
2014/09/29 职场文书
小学生安全保证书
2015/05/09 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
婚育证明格式
2015/06/17 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers