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与XML联手进行网站编程代码实例
Jul 10 PHP
php 修改zen-cart下单和付款流程以防止漏单
Mar 08 PHP
用PHP实现读取和编写XML DOM代码
Apr 07 PHP
PHP源码之explode使用说明
Aug 05 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
Jan 10 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
Jan 06 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
Nov 18 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
Nov 22 PHP
php通过Chianz.com获取IP地址与地区的方法
Jan 14 PHP
PHP实现腾讯与百度坐标转换
Aug 05 PHP
PHP进阶学习之类的自动加载机制原理分析
Jun 18 PHP
thinkphp5.1 框架钩子和行为用法实例分析
May 25 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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
导购员的岗位职责
2014/02/08 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
软件售后服务方案
2014/05/29 职场文书
2014年环保局工作总结
2014/12/11 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
关于Python中进度条的六个实用技巧分享
2022/04/05 Python