PHP如何实现自动补全表单
创始人
2024-12-09 00:40:56
0次

效果图:

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

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 ;
 }
//前端
 
         
         检索 //JS /autoComplete.css" rel="external nofollow" rel="stylesheet" /> /autoComplete.js">  function lookup(event,inputString) {   if(inputString.length != 0) {    var blocked = '0';    var request = new XMLHttpRequest();    request.open("GET", "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 //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;jlength){     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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...