文档章节

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

荆瑶
 荆瑶
发布于 2016/11/24 18:38
字数 953
阅读 90
收藏 0

先上效果图:

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

注册专业这里可以筛选,重点来了!!!!!

实现效果:边输入边显示查询结果(完全前台处理,不请求后台数据)。

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

<html>部分

代码如下:

<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>部分

1. 请求后台数据,将数据处理后展示在前台页面上。代码如下:

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值为鼠标粘贴之前的值。可能存在函数代码执行顺序的问题。

下面的方法主要是通过判断输入状态的改变,类似于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) {//IE6、7、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

最终问题还是解决了,哈哈哈哈哈哈~~~~~~~~

 

© 著作权归作者所有

荆瑶
粉丝 2
博文 55
码字总数 21369
作品 0
海淀
程序员
私信 提问
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
36
0
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
35.8K
22
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
用WijmoJS玩转您的Web应用 —— Angular6

为什么选择WijmoJS? 作为一款纯前端控件集,WijmoJS秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球率先支...

葡萄城技术团队
2018/06/12
1
0
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部