PHP에서 자동으로 양식을 완성하는 두 가지 방법에 대한 자세한 그래픽 설명

이 글에서는 PHP가 자동으로 양식을 완성하는 두 가지 방법을 주로 소개합니다. 첫 번째는 데이터베이스에서 검색한 후 양식을 완성하는 것이고, 두 번째는 메일함과 같은 순수 프런트엔드를 완성하는 것입니다. 참조 값이 필요합니다. 친구는

렌더링을 참조할 수 있습니다.

첫 번째 유형: 데이터베이스에서 검색하고

두 번째 유형: 메일박스 등 순수 프론트엔드 완성

오픈소스 플러그를 활용한 두 번째 유형에 대해 먼저 이야기해보자. -ins이므로 비교적 간단합니다.

github의 프로젝트 완료자.

http://www.php.cn/ 아주 쉽게 할 수 있고, 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">
         <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();});
 }
}
//-->

위는 PHP 양식 자동 완성의 두 가지 방법에 대한 자세한 그래픽 및 텍스트 설명입니다. 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!