首页 > 代码库 > autocomplete插件的简单例子
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 );
}
autocomplete插件的简单例子