SearchFunction.js:

// JavaScript Document
/**
******************************************************************************************
 搜索功能效果
****************************************************************************************** 
*/
//获取文本框的值
var SearchFunction = function(){
  //创建文本框效果
   var inputId;
      function Search_plugin(params){
   var SearchObj = document.getElementById(params.inputId);
   var SearchTnput = document.createElement("input");
   SearchTnput.className="inputText fl";
   SearchTnput.style.width=params.width;
   SearchTnput.id = "SearchTnput"+ params.inputId;
   SearchObj.appendChild(SearchTnput);
   //SearchTnput.focus();
   //创建浮动面板效果
  var list_index = -1;
    SearchLable(params);
    function SearchLable(params){
       var panel_div = document.createElement("div");
    panel_div.className = "topTishi";
    panel_div.id = "Search_Floating_panel"+params.inputId;
    panel_div.Common="Label"
    panel_div.style.position = "absolute";
    panel_div.style.display = "none";
    var div_ul = document.createElement("ul");  
    div_ul.,
     dataType:'json',
     data:{//php传值不需要用function(),只需要用数组即可,就是去掉function().
      limit :10,
      keyword:val
     },
     success:function(data){
      var obj = params;
      obj.titleArry = data;
      //*返回server数据
        SearchLable(obj);
      style_div = $(SearchObj).find('.topTishi');
      style_div.show();
     }
    })
      }else{
    panel.hide(); 
   }
    });
  };
  return {
        Search_plugin: function(params){
            Search_plugin(params);
        }
}
}()

 

Search.css:

@charset "utf-8";
/* CSS Document */
.inputText{border:1px solid #cccccc;border-right:none;height:24px;padding:0 5px; line-height:24px;}
.topTishi{width:176px;border:1px solid #CCC; position:absolute;background:#fff;top:25px;left:5px; text-align:left; display:none}
.topTishi ul{margin:0; padding:0;overflow:hidden;width:100%}
.topTishi ul li{width:97%;height:24px; line-height:24px;cursor:default;padding-left:5px;overflow:hidden;margin:0;margin:0;}

server.json文件:

[{"site_id":"236","site_name":"\u5317\u4eac\u6d77\u6dc0\u533a"},{"site_id":"318","site_name":"\u5317\u4eac\u7ad9"},{"site_id":"383","site_name":"\u5317\u4eac\u5927\u5b66"}]

 

 

JS的配置方法如下所示:

  window.onload = function(){

         SearchFunction.Search_plugin({

       inputId:"id",       //页面中定位搜索文本框的id

            width:"168px",     //搜索文本框的宽度

 url : 'server.json',   //建立服务server.json文件,然后再其中传搜索到的数据,即一个数组,如;['数据1','数据2','数据3,'数据4','数据5','数据6']

            titleArry:'””       //工具引用的输入搜索数据的数据,配置直接为空即可;

click:function(id){//点击每个选项的时候触发的事件

                   },

            keyCode:function(id){ //判断是搜索的内容在选项中是否存在,然后给予的enter事件    }   

          });

}

 

 

 

 

 

 

相关文章: