<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery自动填充表单功能代码 - 网页模板</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
body
{
font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
font-size:14px;
}
.main
{
width: 700px;
height: 600px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
padding:10px;
}
.line
{
margin:5px;
display:block;
}
.ui-autocomplete
{
max-height: 120px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
* html .ui-autocomplete
{
height: 120px;
}
</style>
</head>
<body>
<div class="main">
<br />
<div class="line">
标题：
<input type="text" name="CustomerName" id="txtCustomerName" style="width: 400px;height:30px;line-height:30px;" />
</div>
<div class="line">
名称：
<input type="text" name="CustomerName" id="CustomerName" style="width: 400px;height:30px;line-height:30px;"readonly="readonly" /></div>
<div class="line">
描述：
<textarea name="CustomerDesc" id="CustomerDesc" cols="55" rows="3"></textarea>
</div>
<div class="line">
图片：
<img name="CustomerIcon" id="CustomerIcon" alt="qweqw" src="" />
</div>
</div>
<script type="text/javascript">
$(function () {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "aaaa.jpg"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "bbbb.jpg"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "cccc.jpg"
},
{
value: "DivCSS",
label: "DivCSS",
desc: "DivCSSDivCSSDi;vCSSDivCSSDiv;CSSDivCSSDivCSS",
icon: "dddd.jpg"
},
{
value: "Html5",
label: "Html5",
desc: "Html5Html;5Html5Html5Ht;ml5Html;5Html5Html5Html5;",
icon: "eeee.jpg"
}
];
$("#txtCustomerName").autocomplete({
minLength: 1,
source: projects,
focus: function (event, ui) {
$("#txtCustomerName").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#txtCustomerName").val(ui.item.label);
$("#CustomerName").val(ui.item.value);
$("#CustomerDesc").html(ui.item.desc);
$("#CustomerIcon").attr("src", "images/" + ui.item.icon);
return false;
}
})
.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery自动填充表单功能代码.zip （11个子文件） 
jQuery自动填充表单功能代码 
jQuery自动填充表单功能代码.jpg 53KB jiaoben3485 css 
jquery-ui.css 34KB images 6.jpg 15KB bbbb.jpg 19KB aaaa.jpg 9KB dddd.jpg 18KB eeee.jpg 15KB cccc.jpg 16KB
index.html 4KB js jquery-ui.js 460KB jquery-1.10.2.js 267KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
