前臺實現數據篩選展現，鼠標鍵盤同時監控，相似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

最終問題仍是解決了，哈哈哈哈哈哈~~~~~~~~