PHP自動補全表單的兩種方法的圖文詳解

這篇文章主要介紹了PHP自動補全表單的兩種方法,第一種從資料庫中檢索之後補全，第二種郵箱等純前端的補全，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

效果圖：

第一種：從資料庫擷取之後補全

第二種：郵箱等純前端的補全

先說第二種，使用開源的插件，所以相對簡單。

github上面的專案 completer。

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）！ ################