您的位置：首页 > Web前端 > BootStrap

JS插件之——bootstrap-suggest.js

2015-09-17 20:44 501 查看
今天遇到了一个很牛逼的插件bootstrap-suggest.js 如此好用的搜索提示插件 简直酷毙了源码下载地址编写了一个例子，供以后参考
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<title>1.html</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../js/bootstrap.min.css" />
</head>
<body >
<h3>下拉框示例</h3>
<div class="input-group" style="width:240px;">
<input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px">
<div class="input-group-btn" style="width:1px;">
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-suggest.js"></script>
<script>
var admdirector = $("#admdirector").bsSuggest({
indexId: 4, //data.value 的第几个数据，作为input输入框的内容
indexKey: 0, //data.value 的第几个数据，作为input输入框的内容
allowNoKeyword: false, //是否允许无关键字时请求数据
multiWord: false, //以分隔符号分割的多关键字支持
separator: ",", //多关键字支持时的分隔符，默认为空格
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
effectiveFields:["name","ename","departName","jobtitle"],
effectiveFieldsAlias:{name: "姓名",ename:"英文名",departName:"部门",jobtitle:"职位"},
showHeader: true,
url: '/omss/viewEmpByName?name=', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
processData: function(json){// url 获取数据时，对数据的处理，作为 getData 的回调函数
var i, len, data = {value: []};
if(!json || json.length == 0) {
return false;
}
len = json.length;
for (i = 0; i < len; i++) {
data.value.push({
"name": json[i].name,
"ename": json[i].ename,
"departName":json[i].dep_name,
"jobtitle":json[i].jobtitle,
"eid":json[i].eid
});
}
console.log(data);
return data;
}
});
</script>
</body>

</html>
注意：【1】包含了一个css文件、三个js文件、和一段插件初始化代码
<link rel="stylesheet" href="../../js/bootstrap.min.css" />

<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-suggest.js"></script>

【2】JS文件一定要跟在div的后面展示的效果如下：

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航