服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - PHP教程 - PHP+JS实现的实时搜索提示功能

PHP+JS实现的实时搜索提示功能

2019-10-18 13:15尘中客 PHP教程

这篇文章主要介绍了PHP+JS实现的实时搜索提示功能,涉及php结合ajax实时传输数据与字符串的遍历、匹配相关操作技巧,需要的朋友可以参考下

本文实例讲述了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命名空间namespace及use的简单用法分析

    PHP命名空间namespace及use的简单用法分析

    这篇文章主要介绍了PHP命名空间namespace及use的简单用法,结合实例形式分析了php命名空间的功能、使用方法及相关操作注意事项,需要的朋友可以参考下 ...

    Frank看庐山1702019-09-16
  • PHP教程PHP5.6读写excel表格文件操作示例

    PHP5.6读写excel表格文件操作示例

    这篇文章主要介绍了PHP5.6读写excel表格文件操作,结合实例形式分析了php5.6环境下使用PHPExcel插件针对Excel表格读写的相关操作技巧,需要的朋友可以参考下...

    Sweet小马3102019-06-09
  • PHP教程phpstudy2018升级MySQL5.5为5.7教程(图文)

    phpstudy2018升级MySQL5.5为5.7教程(图文)

    这篇文章主要介绍了phpstudy2018升级MySQL5.5为5.7教程(图文),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    garrett2562019-08-31
  • PHP教程PHP7基于curl实现的上传图片功能

    PHP7基于curl实现的上传图片功能

    这篇文章主要介绍了PHP7基于curl实现的上传图片功能,结合实例形式对比分析了php5.5之前与php7版本的curl图片上传功能相关实现与使用技巧,需要的朋友可以参...

    BroceHui1462019-10-08
  • PHP教程在php的yii2框架中整合hbase库的方法

    在php的yii2框架中整合hbase库的方法

    这篇文章主要介绍了在php的yii2框架中整合hbase库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    penngo3981970-01-01
  • PHP教程PDO::commit讲解

    PDO::commit讲解

    今天小编就为大家分享一篇关于PDO::commit讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧...

    php参考手册4952019-06-27
  • PHP教程Yii2结合Workerman的websocket示例详解

    Yii2结合Workerman的websocket示例详解

    这篇文章主要给大家介绍了关于Yii2结合Workerman的websocket的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    Gowhich1522019-09-07
  • PHP教程PHP序列化的四种实现方法与横向对比

    PHP序列化的四种实现方法与横向对比

    在PHP中,序列化用于存储或传递 PHP 的值的过程中,同时不丢失其类型和结构。本文讲述PHP序列化的四种方案,感兴趣的可以了解一下...

    elarity4842019-08-16