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 相关文章推荐
PR值查询 | PageRank 查询
Dec 20 PHP
windows下PHP APACHE MYSQ完整配置
Jan 02 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
Nov 23 PHP
PHP实现Soap通讯的方法
Nov 03 PHP
php jsonp单引号转义
Nov 23 PHP
学习php开源项目的源码指南
Dec 21 PHP
php导入大量数据到mysql性能优化技巧
Dec 29 PHP
php单文件版在线代码编辑器
Mar 12 PHP
php基于单例模式封装mysql类完整实例
Oct 18 PHP
Thinkphp实现站点静态化的方法详解
Mar 21 PHP
PHP自定义错误处理的方法分析
Dec 19 PHP
php回调函数处理数组操作示例
Apr 13 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实现Socket服务器的代码
2008/04/03 PHP
如何在php中正确的使用json
2013/08/06 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
比利时买床:Beter Bed
2017/12/06 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
幼儿园课题方案
2014/06/09 职场文书
实验室标语
2014/06/21 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
创业计划书之寿司
2019/07/19 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android