仿百度動態查詢

<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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章