仿百度動態查詢
<html>
<head>
<title>仿百度動態查詢</title>
<!--css 代碼區-->
<style type="text/css">
.show
{
position:absolute;
color:Red;
}
.show ul
{
list-style:none;
background-color:transparent;
}
</style>
<!--js代碼區-->
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"> </script>
<script type="text/javascript">
function d() {
alert("從數據庫裏找數據!");
}
$(document).ready(function () {
//li的點擊事件
$('li').click(function () {
var value = $(this).html();
$("#Text1").val(value);
});
//提交點擊事件
$("#Button1").click(function () {
var value = $("#Text1").val();
alert(value);
});
})
</script>
</head>
<body>
<!--輸入框,提價按鈕-->
<div class="two" id="two">
<input id="Text1" type="text" οnkeyup="d()" />
<input id="Button1" type="button" value="提交" />
</div>
<!--動態顯示框-->
<div class="show" id="show" >
<ul>
<li id="1">選項1</li>
<li id="2">選項2</li>
<li id="3">選項3</li>
<li id="4">選項4</li>
<li id="5">選項5</li>
</ul>
</div>
<!-- 用於展示-->
<div class="sss">
<table>
<tr>
<th>編號</th>
<th>菜名</th>
<th>單價</th>
<th>數量</th>
</tr>
<tr>
<td>001</td>
<td>龍蝦</td>
<td>45</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.