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

谁践踏了优雅 2022-03-14 19:26 628阅读 0赞

### 效果 ###

鼠标点击输入框弹出提示内容，内容是根据输入的字符动态加载的，效果如图：  
![在这里插入图片描述][20190308161859807.png]

### HTML ###

### JS ###

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

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

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

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

加载内容的方法：`getArea()`

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

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

[20190308161859807.png]: /images/20220311/3d0f63f8aac4485b9c6ba3ef8b58c2b4.png