PHP でフォームを自動的に完成させる 2 つの方法の詳細な図とテキストの説明

この記事では主に、PHP がフォームを自動的に完成させる 2 つの方法を紹介します。1 つ目は、データベースから取得してフォームを完成させる方法です。2 つ目は、メールボックスなどの純粋なフロントエンドを完成させる方法です。非常に優れており、参考になります。値を必要とする友人

レンダリングを参照できます:

最初のタイプ: データベースからの取得後の完了

2 番目のタイプ: メールボックスなどの純粋なフロントエンドの完了

まず 2 番目のタイプについて説明します。オープンソースのプラグインを使用するため、比較的簡単です。

github 上のプロジェクト完了者。

http://www.php.cn/ やり方はとても簡単で、詳しいドキュメントはgithubにあります。

最初は、これを使用して自分のバックエンドコードと一致させ、最初のタイプの自動補完を作成しようとしましたが、長い時間が経つと失敗しました。おそらく、私の JS が悪すぎるのでしょう。変更を加えすぎると、上記のオープンソース プロジェクトを注意深く調べないと、コードが非常に複雑になってしまいます。

主な失敗は、バックグラウンド データベースで完全なファジー クエリ データが見つかったことです。上記のプラグインを使用すると、最後までしか完了できず、入力値を完全に置き換える方法がありません。たとえば、「fafe」と入力して fafegeg を見つけた場合、補完中であるため、ドロップダウン リストでは fafefafegeg のみを選択できます。

最初の方法について話しましょう。Baidu には良い経験の紹介がなかったので、独自のアイデアに従って実装しました:

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

上記は 2 つの方法の写真とテキストです。 PHP によるフォームの自動入力の詳細については、PHP 中国語 Web サイト (www.php.cn) の関連コンテンツを参照してください。