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版(4)
Oct 09 PHP
PHP中Date()时间日期函数的使用方法小结
Apr 20 PHP
PHP程序开发范例学习之表单 获取文本框的值
Aug 08 PHP
使用PHP计算两个路径的相对路径
Jun 14 PHP
php实现图片添加水印功能
Feb 13 PHP
thinkphp的静态缓存用法分析
Nov 29 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
Mar 19 PHP
php调整服务器时间的方法
Apr 03 PHP
Yii2.0 模态弹出框+ajax提交表单
May 22 PHP
php封装的表单验证类完整实例
Oct 19 PHP
Laravel 添加多语言提示信息的方法
Sep 29 PHP
设定php简写功能的方法
Nov 28 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获取当前url的具体方法全面解析
2013/11/26 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
表单提交验证类
2006/07/14 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python运算符重载用法实例
2015/05/28 Python
简单谈谈python中的多进程
2016/11/06 Python
Python之str操作方法(详解)
2017/06/19 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
单位工作证明书格式
2014/10/04 职场文书
李强为自己工作观后感
2015/06/11 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL