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+MYSQL的文章管理系统(二)
Oct 09 PHP
php下mysql数据库操作类(改自discuz)
Jul 03 PHP
PHP中session变量的销毁
Feb 27 PHP
PHP中的一些常用函数收集
May 26 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
Mar 05 PHP
Yii rules常用规则示例
Mar 15 PHP
php 实现进制相互转换
Apr 07 PHP
PHP实现根据数组的值进行分组的方法
Apr 20 PHP
php连接MSsql server的五种方法总结
Mar 04 PHP
PHP使用Redis长连接的方法详解
Feb 12 PHP
PHP实现的策略模式示例
Mar 20 PHP
使用ucenter实现多站点同步登录的讲解
Mar 21 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简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
angularJS 入门基础
2015/02/09 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python高级用法总结
2018/05/26 Python
python实现简单名片管理系统
2018/11/30 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
少儿节目主持串词
2014/04/02 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
element多个表单校验的实现
2021/05/27 Javascript