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+mysql事务rollback&amp;commit示例
Feb 08 PHP
php对csv文件的读取,写入,输出下载操作详解
Aug 10 PHP
PHP中的按位与和按位或操作示例
Jan 27 PHP
yii中widget的用法
Dec 03 PHP
php实现读取内存顺序号
Mar 29 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
Jun 23 PHP
PHP消息队列用法实例分析
Feb 12 PHP
PHP实现Unicode编码相互转换的方法示例
Nov 17 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
Sep 27 PHP
PHP+MySQL实现消息队列的方法分析
May 09 PHP
Laravel5.1 框架表单验证操作实例详解
Jan 07 PHP
PHP如何通过带尾指针的链表实现'队列'
Oct 22 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP 图像尺寸调整代码
2010/05/26 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
php微信开发之百度天气预报
2016/11/18 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
Python中的多重装饰器
2015/04/11 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python中的二维列表实例详解
2018/06/19 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python实现FTP循环上传文件
2020/03/20 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
新年寄语大全
2014/04/12 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js