Explication graphique et textuelle détaillée de deux méthodes de remplissage automatique de formulaires en PHP

Cet article présente principalement deux méthodes permettant à PHP de remplir automatiquement le formulaire. La première consiste à remplir le formulaire après récupération de la base de données, et la seconde consiste à compléter le front-end pur tel que la boîte aux lettres. a une valeur de référence. C'est nécessaire. Les amis peuvent se référer aux rendus

 :

Le premier type : récupérer dans la base de données et compléter

Le deuxième type : réalisation de frontaux purs tels que les boîtes aux lettres

Parlons d'abord du deuxième type, en utilisant un plug open source -ins, donc c'est relativement simple.

Projet terminé sur github.

http://www.php.cn/ C'est très simple à faire, et il existe des documents détaillés sur github.

Au début, j'ai essayé de l'utiliser pour faire correspondre mon propre code backend afin de créer le premier type de complétion automatique, mais j'ai échoué après une longue période. Peut-être que mon js est trop pauvre. Si j'apporte trop de modifications, le code sera très compliqué à moins que j'étudie attentivement le projet open source ci-dessus.

Le principal échec est que j'ai trouvé les données complètes de la requête floue dans la base de données en arrière-plan. L'utilisation du plug-in ci-dessus ne peut les compléter qu'à l'arrière, et il n'y a aucun moyen de remplacer complètement la valeur d'entrée. Par exemple, si vous tapez fafe et recherchez fafegeg, vous ne pouvez sélectionner fafefafegeg que dans la liste déroulante car il est terminé.

Parlons de la façon de faire le premier. Baidu n'a pas eu une bonne expérience d'introduction, il l'a donc mis en œuvre selon ses propres idées :

/**
  * 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();});
 }
}
//-->

Ce qui précède est une explication graphique et textuelle détaillée des deux méthodes de remplissage automatique des formulaires par PHP. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !