jQuery的手机关键词选择插件

一款jQuery的手机关键字选择插件，点击输入框时，在页面底部出现多个预设的关键字，可以点击选中关键词，重复点击同一个关键词则取消选择，也可以点击“重置”按钮来清空所有选择，点击“确定”后，所有选中关键词出现输入框下面。

分类：表单代码 > 筛选难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入关键词样式文件，简单设置演示样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/keyword.css">
<style type="text/css">
#keyword{
    line-height: 40px;
    border: 1px solid #b5b5b5;
    padding-left: 10px;
}
#showKeyword{
    padding: 10px;
    line-height: 30px;
}
</style>

页面的body部分，需设置好关键词的显示容器，代码如下：

<div id="wrap">
    <div id="keyword">请选择关键词</div>
    <div id="showKeyword"></div>
</div>

页面的底部，需引入jQuery库和关键词插件，并启用插件设置好相关参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/keyword.js"></script>
<script type="text/javascript">
var dataArr=[
    "IT互联网",
    "金融",
    "房产安居",
    "企业服务",
    "教育",
    "法务",
    "策划",
    "影视歌曲戏剧",
    "咨询服务",
    "电子元件",
    "英语小语种",
    "财务会计",
    "体育运动"
];
    $("#keyword").keyword({
        "data":dataArr,
        "wrapId":"wrap",
        "afterClick":function(ret){
            $("#showKeyword").html(ret.join("，"))
        }
    });
$(document).ready(function(){
    $("#wrap").height(document.documentElement.clientHeight+"px");
})
</script>