PHP自动补全表单的两种方法


Posted in PHP onMarch 06, 2017

效果图:

第一种:从数据库中检索之后补全

PHP自动补全表单的两种方法

第二种:邮箱等纯前端的补全

PHP自动补全表单的两种方法

先说第二种,使用开源的插件,所以相对简单。

github上面的项目 completer。

https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档。

一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了。可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目。

主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,用上面的插件只能是补全在后面,没有办法完全替换输入值。比如你输入fafe,查到fafegeg, 但是下拉的表项中只能选到 fafefafegeg,因为是补全。

下面说说第一个怎么做,百度不到什么好的经验介绍,就自己按自己的思路实现了:

/**
  * php 返回模糊搜索的结果给自动完成
  */
 public function actionComplete($value,$blocked) {
  //将输入的值与用户名和邮箱进行模糊查询
  $result1 = User::find()->where(['blocked'=>$blocked])->andWhere(['type'=>$this->type])->andWhere(['like','username',$value])->all();
  $result2 = User::find()->where(['blocked'=>$blocked])->andWhere(['type'=>$this->type])->andWhere(['like','email',$value])->all();
  $string = '';
  foreach ($result1 as $v) {
   $string = $string.$v->username.',';
  }
  foreach ($result2 as $v) {
   $string = $string.''.$v->email.',';
  }
  $string = $string.'';
  //返回格式 类似username1,username2,email1,
  return $string ;
 }
//前端
 <input type="text" id="o" onkeyup="lookup(event,this.value);" placeholder="按用户名和邮箱检索" name="value">
         <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
         <button type="submit" style="height: 30px;width: 55px" class="btn">检索</button>
//JS
<link href="<?= BACKEND_CSS_URL ?>/autoComplete.css" rel="external nofollow" rel="stylesheet" />
<script src="<?= BACKEND_JS_URL ?>/autoComplete.js"></script>
<script language="javascript">
 function lookup(event,inputString) {
  if(inputString.length != 0) {
   var blocked = '0';
   var request = new XMLHttpRequest();
   request.open("GET", "<?= PRE_BACKEND_URL ?>user/complete&value=" + inputString + "&blocked=" + blocked);
   request.send(null);
   request.onreadystatechange = function () {
    if (request.readyState === 4) {
     if (request.status === 200) {
      var result = request.responseText;
      ss = result.split(",")
      var autoComplete=new AutoComplete('o','auto',ss);
      autoComplete.start(event,ss);
     }
    }
   }
  }
 } // lookup
</script>
//autoComplete.css
.auto_hidden {
 width:204px;border-top: 1px solid #333;
 border-bottom: 1px solid #333;
 border-left: 1px solid #333;
 border-right: 1px solid #333;
 position:absolute;
 display:none;
}
.auto_show {
 width:204px;
 border-top: 1px solid #333;
 border-bottom: 1px solid #333;
 border-left: 1px solid #333;
 border-right: 1px solid #333;
 position:absolute;
 z-index:9999; /* 设置对象的层叠顺序 */
 display:block;
}
.auto_onmouseover{
 color:#ffffff;
 background-color:highlight;
 width:100%;
}
.auto_onmouseout{
 color:#000000;
 width:100%;
 background-color:#ffffff;
}
//autoComplete.js
/*
 通用: 自动补全(仿百度搜索框)
 */
var $ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
 return function() {
  return fun.apply(object, arguments);
 }
}
function AutoComplete(obj,autoObj,arr){
 this.obj=$(obj);  //输入框
 this.autoObj=$(autoObj);//DIV的根节点
 this.value_arr=arr;  //不要包含重复值
 this.index=-1;   //当前选中的DIV的索引
 this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
 //初始化DIV的位置
 init: function(){
  this.autoObj.style.left = this.obj.offsetLeft + "px";
  this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
  this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
 },
 //删除自动完成需要的所有DIV
 deleteDIV: function(){
  while(this.autoObj.hasChildNodes()){
   this.autoObj.removeChild(this.autoObj.firstChild);
  }
  this.autoObj.className="auto_hidden";
 },
 //设置值
 setValue: function(_this){
  return function(){
   _this.obj.value=this.seq;
   _this.autoObj.className="auto_hidden";
  }
 },
 //模拟鼠标移动至DIV时,DIV高亮
 autoOnmouseover: function(_this,_div_index){
  return function(){
   _this.index=_div_index;
   var length = _this.autoObj.children.length;
   for(var j=0;j<length;j++){
    if(j!=_this.index ){
     _this.autoObj.childNodes[j].className='auto_onmouseout';
    }else{
     _this.autoObj.childNodes[j].className='auto_onmouseover';
    }
   }
  }
 },
 //更改classname
 changeClassname: function(length){
  for(var i=0;i<length;i++){
   if(i!=this.index ){
    this.autoObj.childNodes[i].className='auto_onmouseout';
   }else{
    this.autoObj.childNodes[i].className='auto_onmouseover';
    this.obj.value=this.autoObj.childNodes[i].seq;
   }
  }
 }
 ,
 //响应键盘
 pressKey: function(event){
  var length = this.autoObj.children.length;
  //光标键"↓"
  if(event.keyCode==40){
   ++this.index;
   if(this.index>length){
    this.index=0;
   }else if(this.index==length){
    this.obj.value=this.search_value;
   }
   this.changeClassname(length);
  }
  //光标键"↑"
  else if(event.keyCode==38){
   this.index--;
   if(this.index<-1){
    this.index=length - 1;
   }else if(this.index==-1){
    this.obj.value=this.search_value;
   }
   this.changeClassname(length);
  }
  //回车键
  else if(event.keyCode==13){
   this.autoObj.className="auto_hidden";
   this.index=-1;
  }else{
   this.index=-1;
  }
 },
 //程序入口
 start: function(event,result){
  if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
   this.init();
   this.deleteDIV();
   this.search_value=this.obj.value;
   var valueArr=this.value_arr;
   //valueArr.sort();
   if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空,退出
   try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
   catch (e){ return; }
   var div_index=0;//记录创建的DIV的索引
   for(var i=0;i<valueArr.length;i++){
    if(reg.test(valueArr[i])){
     var div = document.createElement("div");
     div.className="auto_onmouseout";
     div.seq=valueArr[i];
     div.onclick=this.setValue(this);
     div.onmouseover=this.autoOnmouseover(this,div_index);
     div.innerHTML= result[i];
     console.log();
     this.autoObj.appendChild(div);
     this.autoObj.className="auto_show";
     div_index++;
    }
   }
  }
  this.pressKey(event);
  window.onresize=Bind(this,function(){this.init();});
 }
}
//-->

以上所述是小编给大家介绍的PHP自动补全表单的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
PHP HTML代码串 截取实现代码
Jun 29 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
Apr 17 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
Jul 29 PHP
选择PHP作为网站开发语言的原因分享
Jan 03 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
Sep 04 PHP
php页码形式分页函数支持静态化地址及ajax分页
Mar 28 PHP
Cygwin中安装PHP方法步骤
Jul 04 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
Jul 15 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
Dec 11 PHP
微信小程序 消息推送php服务器验证实例详解
Mar 30 PHP
关于laravel后台模板laravel-admin select框的使用详解
Oct 03 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
Nov 19 PHP
PHP中for循环与foreach的区别
Mar 06 #PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
Mar 05 #PHP
php实现留言板功能
Mar 05 #PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
Mar 04 #PHP
php获取网站根目录物理路径的几种方法(推荐)
Mar 04 #PHP
PHP获取路径和目录的方法总结【必看篇】
Mar 04 #PHP
php redis实现对200w用户的即时推送
Mar 04 #PHP
You might like
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
php array_map()函数实例用法
2021/03/03 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python加载自定义词典实例
2019/12/06 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
爱国主义演讲稿
2014/05/07 职场文书
和睦家庭事迹
2014/05/14 职场文书
运动会口号大全
2014/06/07 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
大学生求职信怎么写
2015/03/19 职场文书
公司员工培训管理制度
2015/08/04 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
教你用python控制安卓手机
2021/05/13 Python