Detailed graphic explanation of two methods of automatically completing forms in PHP

This article mainly introduces two methods for PHP to automatically complete the form. The first is to complete the form after retrieval from the database, and the second is to complete the pure front-end such as mailbox. It is very good and has reference value. It is needed Friends can refer to the

renderings:

The first type: complete the

# after retrieval from the database ##Second type: Completion of pure front-ends such as mailboxes

Let’s talk about the second type first, which uses open source plug-ins, so it is relatively simple.

Project completer on github.

http://www.php.cn/ It is very easy to do, and there are detailed documents on github.

At first I tried to use this to match my own background code to make the first type of automatic completion, but it failed after a long time. Maybe my js is too bad. If I make too many changes, the code will be very complicated unless I study the above open source project carefully.

The main failure is that I found the complete fuzzy query data in the background database. Using the above plug-in can only complete it at the back, and there is no way to completely replace the input value. For example, if you enter fafe and find fafegeg, you can only select fafefafegeg in the drop-down list because it is completion.

Let’s talk about how to do the first one. Baidu didn’t have any good experience introduction, so it implemented it according to its own ideas:

/**
  * 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">
         <p class="auto_hidden" id="auto"><!--自动完成 p--></p>
         <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 = &#39;0&#39;;
   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(&#39;o&#39;,&#39;auto&#39;,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);//p的根节点
 this.value_arr=arr;  //不要包含重复值
 this.index=-1;   //当前选中的p的索引
 this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
 //初始化p的位置
 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
 },
 //删除自动完成需要的所有p
 deletep: 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";
  }
 },
 //模拟鼠标移动至p时，p高亮
 autoOnmouseover: function(_this,_p_index){
  return function(){
   _this.index=_p_index;
   var length = _this.autoObj.children.length;
   for(var j=0;j<length;j++){
    if(j!=_this.index ){
     _this.autoObj.childNodes[j].className=&#39;auto_onmouseout&#39;;
    }else{
     _this.autoObj.childNodes[j].className=&#39;auto_onmouseover&#39;;
    }
   }
  }
 },
 //更改classname
 changeClassname: function(length){
  for(var i=0;i<length;i++){
   if(i!=this.index ){
    this.autoObj.childNodes[i].className=&#39;auto_onmouseout&#39;;
   }else{
    this.autoObj.childNodes[i].className=&#39;auto_onmouseover&#39;;
    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.deletep();
   this.search_value=this.obj.value;
   var valueArr=this.value_arr;
   //valueArr.sort();
   if(this.obj.value.replace(/(^\s*)|(\s*$)/g,&#39;&#39;)==""){ return; }//值为空，退出
   try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
   catch (e){ return; }
   var p_index=0;//记录创建的p的索引
   for(var i=0;i<valueArr.length;i++){
    if(reg.test(valueArr[i])){
     var p = document.createElement("p");
     p.className="auto_onmouseout";
     p.seq=valueArr[i];
     p.onclick=this.setValue(this);
     p.onmouseover=this.autoOnmouseover(this,p_index);
     p.innerHTML= result[i];
     console.log();
     this.autoObj.appendChild(p);
     this.autoObj.className="auto_show";
     p_index++;
    }
   }
  }
  this.pressKey(event);
  window.onresize=Bind(this,function(){this.init();});
 }
}
//-->

The above is the detailed graphic and text explanation of the two methods of PHP automatically completing the form. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!