• 实现input输入时智能搜索


    //      智能搜索
    function oSearchSuggest(searchFuc)
    { 
     var input = $('#in'); 
     var suggestWrap = $('#gov_search_suggest'); 
     var key = ""; 
     var init = function(){ 
      input.bind('keyup',sendKeyWord); 
      input.bind('blur',function(){setTimeout(hideSuggest,100);}) 
     } 
     var hideSuggest = function(){ 
      suggestWrap.hide(); 
     } 
     //发送请求,根据关键字到后台查询 
     var sendKeyWord = function(event){ 
      //键盘选择下拉项 
      if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40)
      { 
       var current = suggestWrap.find('li.hover'); 
       if(event.keyCode == 38)
       { 
        if(current.length>0)
        { 
         var prevLi = current.removeClass('hover').prev(); 
         if(prevLi.length>0)
         { 
          prevLi.addClass('hover'); 
          input.val(prevLi.html()); 
         } 
        }
        else
        { 
         var last = suggestWrap.find('li:last'); 
         last.addClass('hover'); 
         input.val(last.html()); 
        } 
       }
       else if(event.keyCode == 40)
       { 
        if(current.length>0)
        { 
         var nextLi = current.removeClass('hover').next(); 
         if(nextLi.length>0)
         { 
          nextLi.addClass('hover'); 
          input.val(nextLi.html()); 
         } 
        }
        else
        { 
         var first = suggestWrap.find('li:first'); 
         first.addClass('hover'); 
         input.val(first.html()); 
        } 
       } 
       //输入字符 
      }
      else
      { 
       var valText = $.trim(input.val()); 
       if(valText ==''||valText==key)
       { 
        return; 
       } 
       searchFuc(valText); 
       key = valText; 
      } 
     } 
     //请求返回后,执行数据展示 
     this.dataDisplay = function(data){ 
      if(data.length<=0)
      { 
       suggestWrap.hide(); 
       return; 
      } 
      //往搜索框下拉建议显示栏中添加条目并显示 
      var li; 
      var tmpFrag = document.createDocumentFragment(); 
      suggestWrap.find('ul').html(''); 
      for(var i=0; i<data.length; i++)
      { 
       li = document.createElement('LI'); 
       li.innerHTML = data[i]; 
       tmpFrag.appendChild(li); 
      } 
      suggestWrap.find('ul').append(tmpFrag); 
      suggestWrap.show(); 
      //为下拉选项绑定鼠标事件 
      suggestWrap.find('li').hover(function(){ 
       suggestWrap.find('li').removeClass('hover'); 
       $(this).addClass('hover'); 
      },function(){ 
       $(this).removeClass('hover'); 
      }).bind('click',function(){ 
       $(this).find("span").remove(); 
       input.val(this.innerHTML); 
       suggestWrap.hide(); 
      }); 
     } 
     init(); 
    }; 
    //实例化输入提示的JS,参数为进行查询操作时要调用的函数名 
    var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 
    //这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 
    //参数为一个字符串,是搜索输入框中当前的内容 
    function sendKeyWordToBack(keyword){ 
     var aData = []; 
     aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据1'); 
     aData.push('<span class="num_right">约200个</span>'+keyword+'返回数据2'); 
     aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据3'); 
     aData.push('<span class="num_right">约50000个</span>'+keyword+'返回数据4'); 
     //将返回的数据传递给实现搜索输入框的输入提示js类 
     searchSuggest.dataDisplay(aData); 
    } 
    //步骤:
    //1.读取搜索框中的内容$("#搜索框id").val()      (这个是jquery方式读取,用js方式也一样)
    //2.用ajax异步请求(异步的话不会卡,数据量不大的话同步也行),这时候一般需要数据库返回所需的内容,接下来就在ajax的success中操作了。
    // 3.success中:将读取到的返回值data解析,分别存储在相应的变量中。
    // 4.你可以选择使用datatable插件将解析出来的数据显示出来,或者使用<table>标签,然后用
    //               for(var i in datas){
    //                      var tr = "";
    //                      var tempData = [datas[i].logTime,datas[i].logType,datas[i].name];
    //                      for(var j in tempData){
    //                          tr += "<td>" + tempData[j] + "</td>";
    //                      }
    //                      tr = "<tr>" + tr + "</tr>";
    //                      $('#log_table_tbody').append(tr);
    //                  }方式将数据加上去
    
    
    
     mui.init({
            keyEventBind: {
                backbutton: true  //打开back按键监听
            }
        });
            </script>

    注释:

     $('#in'); 为input
    $('#gov_search_suggest');为智能搜索时出现的ul区域。
    主要代码摘录一匿名大神
  • 相关阅读:
    ArcGis设置到 Oracle 的连接
    arcgis批量处理mxd定义服务中的路径
    Arcgis创建SDE_Geometry、SDO_Geometry的区别【转】
    JS常用的function集合
    如何找回Oracle中system,sys用户的密码[转]
    Oracle Spatial中SDO_Geometry详细说明[转]
    JS常用的三种匿名函数
    通用javascript方法
    好文分享之--被无现金社会抛弃的人
    电子产品使用感受之--Windows 10 小米笔记本Air HDMI转VGA无信号问题
  • 原文地址:https://www.cnblogs.com/yongwang/p/6589653.html
Copyright © 2020-2023  润新知