autocomplete,自动补全，中文

最新推荐文章于 2023-04-08 08:23:38 发布

chuhuaiyou1584

最新推荐文章于 2023-04-08 08:23:38 发布

阅读量150

点赞数

文章标签： ui javascript ViewUI

原文链接：https://my.oschina.net/u/3100176/blog/882577

版权

<!doctype html>
<html >
<head>
<meta >
<title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "001",
label: "zydj",
desc: "中央大街",
icon: "jquery_32x32.png"
},
{
value: "002",
label: "xdzj",
desc: "西大直街",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];

$( "#project" ).autocomplete({
minLength: 0,
source: projects,

select: function( event, ui ) {
$( "#project" ).val( ui.item.desc );
$( "#project-id" ).html( ui.item.value );

return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.desc + "</a>" )
.appendTo( ul );
};
$( "#project" ).click(function (){
//alert("123");
// 传递空字符串作为搜索的值，显示所有的结果
$(this).val("");
$( "#project-id" ).html( "" );
$(this).autocomplete( "search", "" );
});
});
</script>
</head>
<body>

<input id="project">

<font id="project-id"><font>

</body>
</html>

转载于:https://my.oschina.net/u/3100176/blog/882577

chuhuaiyou1584

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
autocomplete,自动补全，中文

<!doctype html> <html > <head> <meta > <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title> <link re...
复制链接

扫一扫