selectmenu实现支持模糊查找的下拉单选菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:selectmenu实现支持模糊查找的下拉单选菜单效果代码

代码标签: 模糊 查找 下拉 单选 菜单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            var selectMenuData = [{
                id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛', abbr: 'CHI'
            },
                {
                    id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士', abbr: 'CLE'
                },
                {
                    id: 3, name: 'Detroit Pistons', desc: '底特律活塞', abbr: 'DET'
                },
                {
                    id: 4, name: 'Indiana Pacers', desc: '印第安纳步行者', abbr: 'IND'
                },
                {
                    id: 5, name: 'Milwaukee Bucks', desc: '密尔沃基雄鹿', abbr: 'MIL'
                }];
            use(["selectmenu.min", "selectmenu"], function() {
                $('#btnMenu').click(function() {
                    $(this).selectMenu({
                        showField: 'name',
                        keyField: 'id',
                        initSelected: 1,
                        //自定义菜单项目显示模板
                        formatItem: function(row) {
                            var html = '<div class=""><div class="col-md-3">';

                            html += '</div>';
                            html += '<div class="col-md-7&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0