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】相关文章
3. HTML5 postMessage 和 onmessage API 详细应用
4. Magí
7. Frogger-ish
8. Digger
9. 谷歌将整合其博客平台Blogger与Google+服务
10. TaggingJS – 可以灵活定制的jQuery标签系统插件
本文来源:https://www.51html5.com/a3291.html
﹝jquery搜索建议MagicSuggest﹞相关内容
- Skygear-01 Destroyer
- MUGEDA-基于HTML5技术的云动画平台
- 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js
- Mugeda:基于云的HTML5动画平台
- 创业公司Mugeda 推出网页版HTML5 动画编辑器
- 流行的jQuery Scroll Path plugin
- 流行的jQuery Scroll Path plugin
- 全球最大HTML5平台softgames CEO Alexander Krug将出席GMGC2015
- HTML5之window.postMessage API
- Danger Ranger