(jQuery插件)autocomplete插件的简单例子
1.引入相应的js和css,我用到的时候是在jquery-ui的js里面整合的,ui的css
2.先在html上写一个input
<input id="tags" class="form-control ui-autocomplete-input" autocomplete="off" type="text">
<input id="tagsid" type="text">
3.css上设置一下高主要是防止ie
.ui-autocomplete {
max-height: 424px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
}
/* IE 6 不支持 max-height
* 我们使用 height 代替，但是这会强制菜单总是显示为那个高度
*/
* html .ui-autocomplete {
height: 424px;
}
4.js
//autocomplete
var projects = [
{
value: "218",
label: "jQuery",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
},
{
value: "105",
label: "jQuery UI",
desc: "28",
icon: ""
}
];
$( "#tags" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
//alert(ui.item.label);//选择到哪一个.
return false;
},
select: function( event, ui ) {
//真正的选择.
//alert(ui.item.label);
$("#tagsid").val(ui.item.value);
//alert(ui.item.desc);
//alert(ui.item.icon);
return false;
}
})
$("#tags").data("ui-autocomplete")._renderItem = function (ul, item) {
return $( "<li>" ).append( "<a><table width='400px'><tr><td align='left'>" + item.label + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + item.desc + "个宝贝</font> </td></tr></table></a>" ).appendTo( ul );
}
最新文章
- llinux常用命令
- 微软TFS Agile/CMMI/Scrum
- Global和Globals
- oracle判断字段是否存在语句
- [ML] Naive Bayes for email classification
- FreeModbus for stm32（Keil工程）——精简Modbus slave协议【worlsing笔记】
- Zendframework连接两个或多个数据库的实现
- 正确使用Git Flow
- 字符串解析运用-将字符串分解为多个整数，求各整数之和(华为oj)
- （转）IDEA破解 2017 IDEA license server 激活（可用）
- mysql 导入sql 2006 - mysql server has gone away 导入
- 四则运算 Java 姚康友，黎扬乐
- 分析api时去除全局异常
- 自己设计一个日期类,可以输入年月日作为构造时的参数,如果不使用参数,则设定为1900年1月1日;编写一个方法equals判断两个日期是否相等;另一个方法compareTo可以进行日期之间的比较,返回两个日期之间相差的天数.
- C++网络爬虫的实现——WinSock编程
- 1003 我要通过！| PAT (Basic Level) Practice
- Java Queue 专题
- 去掉Firefox的标题栏
- UNIX网络编程读书笔记：字节操纵函数
- Mysql双机热备--预备知识