前台实现数据筛选展现，鼠标键盘同时监控，相似angularJs的filter

时间 2019-11-05

标签前台实现数据筛选展现鼠标键盘同时监控相似 angularjs filter 栏目 AngularJS 繁體版

原文原文链接

先上效果图：

点击证书类型，请求对应后台数据，显示其注册专业。javascript

注册专业这里能够筛选，重点来了！！！！！php

实现效果：边输入边显示查询结果（彻底前台处理，不请求后台数据）。html

下面是"注册专业"部分的代码：

<html>部分java

代码以下：web

<div class="overflowSet" style="width: 200px;">
   <div class="everyCol" style="width: 217px;">
      <p>
         <span>注册专业</span>
      </p>
      <div class="iptAuto dn">
         <!--input添加了onkeyup事件监听键盘事件，经过函数控制鼠标粘贴事件-->
         <input id="majorIpt" type="text" placeholder="找不到？这里输入查一下" onkeyup="FilterMajor(this.value)"/>
      </div>
      <ul id="registerMajor"></ul><!--内容经过ajax获取-->
   </div>
</div>

<JavaScript>部分ajax

1. 请求后台数据，将数据处理后展现在前台页面上。代码以下：chrome

var major_arr;
function ShowThisMajor(obj) {
    $('.iptAuto').addClass('dn');//input框默认不显示，数据加载完后显示。说明：.dn{display:none;}
    $('#majorIpt').val('');//input值置为空
    $("#registerMajor").html('<div style="width:120px;margin:100px auto;text-align:center;">加载中，请稍后...<br/><img src="<?php echo Configure::read("webpath")?>images/little-loading.gif"></div>');
    $.ajax({
        url: weburl + 'index',
        method: 'post',
        success: function (data) {
            var arr = JSON.parse(data);
            major_arr = arr;//将从后台接收到的数据存到全局变量里，以便筛选时使用
            var str = '',i;
            for(i in arr){//将数据处理后展现在页面上
                str += '<li data-secid><a href="javascript:" onclick="ShowThisGrade(this)">' + arr[i] + '</a><ul class="thirdul"></ul></li>';
            }
            $('.iptAuto').removeClass('dn');//input显示。说明：.dn{display:none;}
            $("#registerMajor").html(str);
        }
    })
}

2. 根据input输入内容筛选已有数据。代码以下：数组

function FilterMajor(v){
        v = v.trim();
        var new_arr = [], n, m, i,str='';
        if(v == ''){//若是input内容为空则显示所有数据
            for(n in major_arr){
                str += '<li data-secid><a href="javascript:" onclick="ShowThisGrade(this)">' + major_arr[n] + '</a><ul class="thirdul"></ul></li>';
            }
            $("#registerMajor").html(str);
        }else{
            for(i in major_arr){//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，-1为未匹配到
                var mark = major_arr[i].indexOf(v);//使用此方法标记匹配位置以便处理匹配字符变色
                if(mark >= 0){//将匹配到的值拼成新数组
                    new_arr.push({'name':major_arr[i],'mark':mark});
                }
            }
            for(m in new_arr){
                str += '<li data-secid><a href="javascript:" onclick="ShowThisGrade(this)">' + new_arr[m].name + '</a><ul class="thirdul"></ul></li>';
            }
            $("#registerMajor").html(str);
        }
}

3. 监听鼠标事件。函数

说明：普通的鼠标监听事件没法获取用户用鼠标右键粘贴到input内的值，eg：onpaste事件，使用时，取到的input值为鼠标粘贴以前的值。可能存在函数代码执行顺序的问题。post

下面的方法主要是经过判断输入状态的改变，相似于onchange，IE9以上、firefox、chrome等都支持了Html中的oninput事件，而IE6/7/8则能够经过onpropertychange事件来解决，可是IE6/7/8下若是input为disabled则事件无效，IE9+ FF opera11+，该事件用js改变值时不会触发，自动下拉框选值时不会触发，代码以下：

var $search_ipt = $('#majorIpt');
function bindChangeHandler(input,fun) {
    if("onpropertychange" in input) {//IE六、七、8，属性为disable时不会被触发
        input.onpropertychange = function() {
            if(window.event.propertyName == "value") {
                if(fun) {
                    fun.call(this,window.event);
                }
            }
        }
    } else {
        //IE9+ FF opera11+,该事件用js改变值时不会触发，自动下拉框选值时不会触发
        input.addEventListener("input",fun,false);
    }
}

//使用
bindChangeHandler($search_ipt[0],function(){
    FilterMajor(this.value);
});

开发时遇到的问题：

1. 筛选：“正则“ VS “indexOf”，最后选了indexOf，由于后续若是处理筛选字匹配到的颜色变化时，须要找到对应字的下标，而后给该串文字加字体变化。正则没法知足此要求。此处未作颜色变化处理。

2. 鼠标事件：键盘的监听事件能够用onkeyup处理，而鼠标监听尝试了各类方法仍没法正确调用函数，经过度娘找处处理方法。参考网址：http://www.cnblogs.com/subying/p/input-change.html

最终问题仍是解决了，哈哈哈哈哈哈~~~~~~~~