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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
AngularJS入门之动画
Jul 27 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue v-model实现自定义样式多选与单选功能
Jul 05 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python add_argument()用法解析
2020/01/29 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
办公室副主任岗位职责
2013/11/25 职场文书
个人优缺点自我评价
2014/01/27 职场文书
八年级美术教学反思
2014/02/02 职场文书
房屋转让协议书范本
2014/04/11 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
大学毕业生自我评价
2015/03/02 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA