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

搜索功能举例

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

代码语言：javascript

复制

define('widget/search.js', [], function (require, exports, module) {
var _dom = {
    keyword: $(&#39;.js_keyword&#39;),
    dataRole: $(&#39;.js_submit&#39;).attr(&#39;data-role&#39;),
    btn: $(&#39;.js_submit&#39;),
};

function search() {
    var type = _dom.dataRole;
    var keyword = _dom.keyword.val();

    if (keyword != &#39;&#39;) {
        location.href = &#39;http://wzy.search.xxx.com/detail/list/?filter=&#39; + type +
            &#39;&amp;keyword=&#39; + keyword;
    } else {
        $.dialog.errorTips(&#34;请您输入搜索内容&#34;);
    }
}

module.exports = {
    init: function () {
        $(&#39;[data-act=&#34;searcher&#34;]&#39;).on(&#39;click&#39;, function (e) {
            search();
        });
    }
};

//回车监听事件
$(document).keydown(function (event) {
    if (event.keyCode == 13) {
        search();
    }
});

});

HTML自定义属性的应用

考虑到搜索功能是网站的公共功能，可以从多个页面跳转到搜索页，故做如下优化：
- html自定义属性，区分是从哪个页面跳转到搜索
- 在public.js中初始化搜索（public.js会被所有页面引入）
- js根据type（页面来源）和keyword（关键字）进行搜索

html代码

data-act的作用:
- public.js据此判断是搜索功能还是其他功能
data-role的作用：
- search.js 据此判断搜索的类型

代码语言：javascript

复制

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