zoukankan      html  css  js  c++  java
  • 搜索插件

    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.id="ul_id"+params.inputId;
           var htmlD = '';
         for (var i=0; i<params.titleArry.length;i++){
       htmlD +=   '<li class="liTishi2 listitem" jqindex="' + i +'" jqid=' +  params.titleArry[i]['site_id']
             +' id="mess_center_' + params.inputId +'" >'+params.titleArry[i]['site_name']+'</li>'
        } 
        div_ul.innerHTML=htmlD;
        $(SearchObj).find('.topTishi').remove();
        panel_div.appendChild(div_ul);
        SearchObj.appendChild(panel_div);
        $(SearchObj).find('.listitem').bind('mouseover', function(){
               this.style.background='#ccffff'; 
               list_index = $(this).attr('jqindex');
              }).bind('mouseout', function(){
               this.style.background='#ffffff';
               list_index = $(this).attr('jqindex');
              }).bind('click', function(){
               SearchTnput.value = this.innerHTML;
                  if(params.click){
                params.click($(this).attr('jqid'));
               }
              });
        var y=0;
        var x=0;
        var onj =SearchTnput;
        y = SearchTnput.offsetTop;
        x = SearchTnput.offsetLeft;
        while (onj = onj.offsetParent) {
        x += onj.offsetLeft;
        y += onj.offsetTop;
       }
       var selectWidth = SearchTnput.offsetWidth;
       var selectHeight = SearchTnput.offsetHeight;
       panel_div.style.width = selectWidth-2+"px";
       panel_div.style.top = y + selectHeight+"px";
       panel_div.style.left = x +"px";
       }
        /**
         * 1.事件的绑定(键盘事件)
      * 2.
      *
      */
      
      $(document).click(function(e){
       if(e.target == SearchTnput)return;
       $('.topTishi').hide();            
      });
      /*
       是功能键效果 
      */
        $('#' + "SearchTnput"+ params.inputId).bind('keyup', function(e){
       /*
        判断是否是功能键
       */
       
       var style_div = $(SearchObj).find('.topTishi') ;     
       var self= this;
       var size=style_div.find("li").size();
       var fn = function(index, isUpdate){
        style_div.find("li").css("background","#ffffff");
        style_div.find("li").eq(index).css("background","#ccffff");
        if(isUpdate === true)self.value = style_div.find("li").eq(index).html();
       }
       fn(list_index);
       switch(e.keyCode){
        case 38://up
         list_index--;
         if(list_index < 0)list_index = size - 1;
         fn(list_index, true);
         return;
         break;
        case 40://down
         list_index++;
         if(list_index >= size )list_index = -1;
         fn(list_index, true);
         return;
         break;
       }                            
          var reg = /^\s+|\s+$/;
       var val= this.value;
       val = val.replace(reg,'');
       
       
       /*
       1.判断当前keyCode是否为回车键
       2.取出当前搜索框中的数据
       3.与服务器传递过来的列表数据比对,遍历列表,如果存在相同的数据,则取出这个id,并且执行回调事件,跳出循环
       
       */
       if(e.keyCode== 13){
         var flag = false;
         for (var i=0; i<params.titleArry.length;i++){
          if(val==params.titleArry[i]['site_name']){
           flag = params.titleArry[i]['site_id'];
           break;
            }
         } 
         if(false === flag){
         params.keyCode(0); 
        }else{
         params.keyCode(flag); 
        }
       }
       
       var panel = $(SearchObj).find('.topTishi');
       if(val !== ''){
        $.ajax({
         url:params.url,
         type:"POST",
         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{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;100%}
    .topTishi ul li{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

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

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

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

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

                       },

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

              });

    }

  • 相关阅读:
    真的是最后一次作业了!!!!
    最后一次总结
    作业十一总结?
    作业十一总结
    实验十总结
    作业9总结
    附加作业
    补交第十次作业
    补交第九次作业
    补交第八次作业
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2776677.html
Copyright © 2011-2022 走看看