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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
Angular2库初探
Mar 01 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
JS闭包经典实例详解
Dec 20 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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验证码类代码分享(已封装成类)
2011/07/17 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue递归获取父元素的元素实例
2020/08/07 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python中文件操作简明介绍
2015/04/13 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python实现简易淘宝购物
2019/11/22 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
美丽乡村建设实施方案
2014/03/23 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
接待员岗位职责范本
2015/04/15 职场文书
开场白怎么写
2015/06/01 职场文书
楚门的世界观后感
2015/06/03 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
利用Python实时获取steam特惠游戏数据
2022/06/25 Python