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>
时间: 2024-11-03 21:15:17

bootStrap suggest js下拉框的使用的相关文章

bootstrap中selectpicker下拉框使用方法实例

最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css    bootstrap-select.m

Ext js 下拉框下拉的同时输入模糊查询

var joincmpcombo = new Ext.form.ComboBox({//设计师                    id: 'joincmp_name',                    name: 'joincmp_name',                   hiddenName: 'joincmp', //后台获取的是id的值                    fieldLabel: '联盟商',                    valueField:

bootstrap 多级联动下拉框

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.

js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github.com/agarzola/jQueryAutocompletePlugin 官方的英文文档:http://api.jqueryui.com/autocomplete/ 在使用过程中遇到大坑跟大家说一下. 第一个是插件的数据源问题! 如果要使用服务器的数据源需要在调用autocomplete的时候传

angular.js 下拉框选中 根据后台返回值

前景,根据后台返回值选中某个项 <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=&qu

抽取JS下拉框函数

//车辆颜色 BasePage.BindVehicleColorQueryControl=function(formId,ctrId){ $("#"+ctrId).combobox("setValue",''); $("#"+ctrId).combobox({valueField:'TypeId',textField:'TypeName', panelHeight: 'auto',editable:false}); $('#'+ctrId).co

地址联动下拉框实现

<head> <meta charset="UTF-8"> <title>地址联动下拉框实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="

bootstrap下拉框的例子,提示Error: Bootstrap&#39;s JavaScript requires jQuery

bootstrap很多js依赖jquery,所以需要引入jquery 遇到的问题: 页面访问提示:Error: Bootstrap's JavaScript requires jQuery 解决方法: 在引入bootstrap的js文件之前,先引入jquery.js 导入顺序可以向下面一样 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><link rel

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&amp;多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴