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 相关文章推荐
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 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动态生成VRML网页
2006/10/09 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Django的models中on_delete参数详解
2019/07/16 Python
python实现键盘输入的实操方法
2019/07/16 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
关于python 跨域处理方式详解
2020/03/28 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
汽车维修求职信
2014/06/15 职场文书
英语复习计划
2015/01/19 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
个人求职自荐信范文
2015/03/06 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书