Bootstrap弹出框（Popover）插件动态加载数据

效果

鼠标点击输入框弹出提示内容，内容是根据输入的字符动态加载的，效果如图：

HTML

<input type="text" class="form-control" name="fromArea" id="fromArea" placeholder="地区" data-toggle="popover">

JS

初始化，放入一个div用来存加载的内容

$("#fromArea").popover({placement: "auto",html: true,content: "<div id='fromArea_div'></div>"
});

弹框显示的时候触发getArea() 方法

$('#fromArea').on('show.bs.popover', function () {getArea();
});

加载内容的方法：getArea()

    function getArea() {$.get({url: '/person/findarea',data: {fromArea: $("#fromArea").val()},success: function (data) {var html = "";jQuery.each(data.page, function(i, v) {html = html + "<button type=\"button\" class=\"btn btn-success btn-xs\" onclick='selectFromArea(this)'>" + v + "</button>&nbsp;";});$("#fromArea_div").html(html);}});}

键盘监听事件（输入内容中间停顿0.5秒会触发getArea() ）

        var flag = false;var timer;//键盘监听事件$('#fromArea').keydown(function () {clearTimeout(timer);flag = true;timer = setTimeout(function () {flag = false;getArea();}, 500);});

Bootstrap弹出框（Popover）插件动态加载数据相关推荐

学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框 data属性详解 js方法与事件方法: 事件: 注意事项 popover提示框组件依赖 ...
【jquery】Chosen.jquery.js 插件动态加载数据问题
Chosen.jquery.js目前版本v1.6.2,官方文档链接https://harvesthq.github.io/chosen/ 插件有一个css文件和一个js文件,都命名为Chosen,引入 ...
swiper支持动态加载数据
用swiper插件动态加载数据:动态获取完数据之后,在初始化swiper. 1.在<head>标签里面加入swiper的css和js文件 <link rel="styles ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
Bootstrap 弹出框
一.Bootstrap 弹出框弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容. 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 ...
js仿苹果风格弹出框alert插件
下载地址 js仿苹果风格弹出框alert插件,多种调用方式. dd:
前台alert弹出页面，点击确定，关闭弹出框，整个页面进行刷新数据
前台alert弹出页面,点击确定,关闭弹出框,整个页面进行刷新数据location.reload(); $("#saveBatch").on("click", ...
Unity3D的uniSWF插件动态加载SWF UI资源
uniSWF能把Flash的素材像用AS3编程类似,只不过环境要在C#或者JS中编程.要是想创建一个类似Menu菜单或者像导航一样的菜单,在Unity中首先要选择摄像机,给摄像机添加MovieClip ...
Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...

Bootstrap弹出框（Popover）插件动态加载数据

效果

HTML

JS

Bootstrap弹出框（Popover）插件动态加载数据相关推荐

最新文章

热门文章