HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > jquery搜索建议MagicSuggest

jquery搜索建议MagicSuggest


在线演示


        jquery搜索建议MagicSuggest是一个高度灵活的自动提示组合框,支持多选,改变下拉内容渲染方式,仿谷歌搜索或百度搜索提示。
- 侧触发是可见的,选择的项目出现在组合本身。- 建议将出现在用户开始输入- 用户可以使用箭头键切换的建议- 用户可以通过使用退格删除所选项目- 用户可以按住Ctrl键选择多个项目- 用户可以自由进入使用回车键- 用户可以修改默认渲染方式
代码:
<link rel="stylesheet" href="magicsuggest-x.y.z-min.css"><script type="text/javascript" src="jquery-1.8.3-min.js"></script><script type="text/javascript" src="magicsuggest-x.y.z-min.js"></script>
$('#ms-tpl').magicSuggest({    width: 590,    highlight: false,    data: [{        id: 0,        name: "Panda",        desc: "Pandas are great furry animals",        image: "images/panda.png"    },{        id: 1,        name: "Butterfly",        desc: "Butterflies fly better with theirs wings on",        image: "images/butterfly.png"    },{        id: 2,        name: "Dolphin",        desc: "Dolphins call themselves by name like we do",        image: "images/dolphin.png"    },{        id: 3,        name: "Elephant",        desc: "Elephants are pretty heavy animals",        image: "images/elephant.png"    },{        id: 4,        name: "Hippopotamus",        desc: "Not quite sure what these guys are here for",        image: "images/hippo.png"    },{        id: 5,        name: "Turtle",        desc: "Turtles can live up to 200 years",        image: "images/turtle.png"    }],    renderer: function(v){    return '<div>' +        '<div style="float:left;"><img src="' + v.image + '"/></div>' +        '<div style="padding-left: 85px;">' +            '<div style="padding-top: 20px;font-style:bold;font-size:120%;color:#333">' + v.name + '</div>' +            '<div style="color: #999">' + v.desc + '</div>' +            '</div>' +        '</div><div style="clear:both;"></div>';    }});

【jquery搜索建议MagicSuggest】相关文章

1. jquery搜索建议MagicSuggest

2. jquery搜索建议MagicSuggest

3. HTML5 postMessage 和 onmessage API 详细应用

4. Magí

5. jQuery Toggles

6. jQuery Toggles

7. Frogger-ish

8. Digger

9. 谷歌将整合其博客平台Blogger与Google+服务

10. TaggingJS – 可以灵活定制的jQuery标签系统插件

本文来源:https://www.51html5.com/a3291.html

点击展开全部

﹝jquery搜索建议MagicSuggest﹞相关内容

「jquery搜索建议MagicSuggest」相关专题

其它栏目

也许您还喜欢