bootstrap suggest下拉框使用详解


Posted in Javascript onApril 10, 2017

bootStrap suggest js下拉框的使用,供大家参考,具体内容如下

HTML

<div class="modalTop" id="suit_name_div">
  <p>选择商品:</p>
  <%@ include file="dataJs/item/itemSuggest.jsp" %>
</div>

itemSuggest.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<link id="bscss" href="plugins/bootstrap/css/bootstrap.min.css"
  rel="stylesheet">
<div class="container"
  style="width: 40%; margin: 0; padding: 0; margin-left: 16px; float: left;">
  <div class="input-group" style="width: 100%">
    <i class="clearable fa fa-remove"
      style="line-hight: 30px; font-size: 14px"></i> 
    
    <input id="suitName"
      type="text" style="width: 300px; height: 30px; padding: 0 4px;">

    <div class="input-group-btn" style="width: 0%">
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
      </ul>
    </div>
    <!-- /btn-group -->
  </div>
</div>
<div class="clearfix"></div>

js

(function() {
 /**
  * 请求json格式的数据 {value: [key:value,key2:value2]};
  */
 function init(url, dataList) {
  $.ajax({
   type : 'post',
   async : false,
   url : url,
   success : function(data) {
    for (var i = 0; i < data.length; i++) {
     var obj = {};
     obj.name = data[i].itemName;
     dataList.value.push(obj);
    }
   }
  })
  return dataList;
 }
 /**
  * 插件绑定事件
  */
 function suggest(domID, dataList) {
  $("#" + domID).bsSuggest({
   indexId : 1, // data.value 的第几个数据,作为input输入框的显示的内容
   // indexKey: 2, //data.value 的第几个数据,作为input输入框的内容
   data : dataList
  }).on('onDataRequestSuccess', function(e, result) {
   console.log('从 json参数中获取,不会触发 onDataRequestSuccess 事件', result);
  }).on('onSetSelectValue', function(e, keyword, data) {
   console.log('onSetSelectValue: ', keyword, data);
  }).on('onUnsetSelectValue', function() {
   console.log("onUnsetSelectValue");
  });

 }

 var dataList = {
  value : []
 };
 var url = hostUrl + "item/selectItemList.do";
 init(url, dataList);
 console.info(dataList);
 suggest("suitName", dataList);

}());

要引入的js

<script src="suggest/src/bootstrap-suggest.js"></script>
<script src="dataJs/item/itemSuggest.js"></script>(即上方js代码)
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
jquery 图片轮换效果
Jul 29 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 #Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 #Javascript
vue.js单页面应用实例的简单实现
Apr 10 #Javascript
javascript内存分配原理实例分析
Apr 10 #Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 #Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 #Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
You might like
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
js运动事件函数详解
2016/10/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
python提取字典key列表的方法
2015/07/11 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python如何进入交互模式
2020/07/06 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
医学生自我评价
2014/01/27 职场文书
求职个人评价范文
2014/04/09 职场文书
教室标语大全
2014/06/21 职场文书
2014年后勤工作总结
2014/11/18 职场文书
python - timeit 时间模块
2021/04/06 Python