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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
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的ASP防火墙
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python关于变量名的基础知识点
2020/03/03 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
个人自我鉴定写法
2013/11/30 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
文艺节目主持词
2015/07/06 职场文书
导游词之天津盘山
2019/11/01 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
flex弹性布局详解
2022/03/20 HTML / CSS