jquery回车监听事件及html自定义属性的应用

![> 搜索功能举例

1. jquery回车监听事件 在最后那行代码

define('widget/search.js', [], function (require, exports, module) {    var _dom = {        keyword: $('.js_keyword'),        dataRole: $('.js_submit').attr('data-role'),        btn: $('.js_submit'),
    };    function search() {        var type = _dom.dataRole;        var keyword = _dom.keyword.val();        if (keyword != '') {
            location.href = 'http://wzy.search.xxx.com/detail/list/?filter=' + type +                '&keyword=' + keyword;
        } else {
            $.dialog.errorTips("请您输入搜索内容");
        }
    }    module.exports = {        init: function () {
            $('[data-act="searcher"]').on('click', function (e) {
                search();
            });
        }
    };    //回车监听事件
    $(document).keydown(function (event) {        if (event.keyCode == 13) {
            search();
        }
    });
});

HTML自定义属性的应用

1. 考虑到搜索功能是网站的公共功能，可以从多个页面跳转到搜索页，故做如下优化：

• html自定义属性，区分是从哪个页面跳转到搜索

• 在public.js中初始化搜索（public.js会被所有页面引入）

• js根据type（页面来源）和keyword（关键字）进行搜索

html代码

1. data-act的作用:

• public.js据此判断是搜索功能还是其他功能

1. data-role的作用：

• search.js 据此判断搜索的类型

    <div class="search-box fn-right js_search_container">        <div class="box">
            <input type="text" name="" class="frm-input js_keyword"
                   placeholder="输入关键词"/>
            <input type="submit" class="btn btn-primary search js_submit" data-act="searcher" data-role="series"
                   value="搜索"/>
        </div>
    </div>

一个敲代码，写文字的人，我在这里！

430.jpg

](http://upload-images.jianshu.io/upload_images/1422490-c4d9318c9c7a1a1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)> 搜索功能举例

1. jquery回车监听事件 在最后那行代码

define('widget/search.js', [], function (require, exports, module) {    var _dom = {        keyword: $('.js_keyword'),        dataRole: $('.js_submit').attr('data-role'),        btn: $('.js_submit'),
    };    function search() {        var type = _dom.dataRole;        var keyword = _dom.keyword.val();        if (keyword != '') {
            location.href = 'http://wzy.search.xxx.com/detail/list/?filter=' + type +                '&keyword=' + keyword;
        } else {
            $.dialog.errorTips("请您输入搜索内容");
        }
    }    module.exports = {        init: function () {
            $('[data-act="searcher"]').on('click', function (e) {
                search();
            });
        }
    };    //回车监听事件
    $(document).keydown(function (event) {        if (event.keyCode == 13) {
            search();
        }
    });
});

HTML自定义属性的应用

1. 考虑到搜索功能是网站的公共功能，可以从多个页面跳转到搜索页，故做如下优化：

• html自定义属性，区分是从哪个页面跳转到搜索

• 在public.js中初始化搜索（public.js会被所有页面引入）

• js根据type（页面来源）和keyword（关键字）进行搜索

html代码

1. data-act的作用:

• public.js据此判断是搜索功能还是其他功能

1. data-role的作用：

• search.js 据此判断搜索的类型

    <div class="search-box fn-right js_search_container">        <div class="box">
            <input type="text" name="" class="frm-input js_keyword"
                   placeholder="输入关键词"/>
            <input type="submit" class="btn btn-primary search js_submit" data-act="searcher" data-role="series"
                   value="搜索"/>
        </div>
    </div>

一个敲代码，写文字的人，我在这里！

来玩啊

作者：老程和他的朋友们
链接：https://www.jianshu.com/p/c7f7f2dcc79c