用AJAX實作類別似GOOGLE搜尋方塊的功能

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一個頁面；

/產生與輸入內容匹配行
           function setNames(names)
           {
              if(names=="")
              {
              clearNames();
              return;
              }
              clearNames();
              setOffsets();
              var row, cell, txtNode;
              var s=names.split("$");

              for (var i = 0; i < s.length; i++)

{

                 //s[i]為td的
                    var nextNode =s[i];
                    row = document.createElement("tr");
                    cell = document.createElement("td");
                    cell.onmouseout = function() {this.style.backgroundColor='';};
                    cell.onmouseover = function() {this.style.backgroundColor='#ffff00';};
                    cell.onclick = function() { completeField(this); } ;
                    cell.pop="T";
                    txtNode = document.createTextNode(nextNode);
                   cell.appendChild(txtNode);
                    row.appendChild(cell);
                    document.getElementById("body1").appendChild(row);
              }
           }

//用來設定當滑鼠失去焦點後文字框的隱藏
        document.onmousedown=function()
        {
            if(!event.srcElement.pop)
             clearNames();
         }//填寫輸入框
    function completeField(cell)
    {
        inputField.value = cell.firstChild.nodeValue;
        clearNames();
    }
//清除自動完成行
    function clearNames()
    {
         completeBody = document.getElementById("body1");
        var ind = completeBody.childNodes.length;
        for (var i = ind - 1; i >= 0 ; i--)
        {
                completeBody.removeChild(completeBody.childNodes[i]);
        }
        completeDiv = document.getElementById("popup");
        completeDiv.style.border = "none";
}

        //設定顯示位置
           function setOffsets()
           {
               completeTable.style.width = inputField.offsetWidth; + "px";
               var left = calculateOffset(inputField, "offsetLeft");
               var top = calculateOffset(inputField, "offsetTop") + inputField. offsetHeight;
               completeDiv.style.border = "black 1px solid";
               completeDiv.style.left = left + "px";
               completeDiv.style.top = top + "px";
           }
           function calculateOffset(field, attr) {
    var offset = 0;
     while(field) {
     offset += field[attr];
     field = field.offsetParent;
    }
    return offset;
   }

<html>

</body>

</html

第二個頁面（getCity.aspx）

注意：必須刪除這個頁面中的所有的HTML

然後在cs檔案中做自己想要的處理，作為字串輸入；

getCity.cs

     string id = Request.QueryString["id"].ToString();
        SqlConnection con = new SqlConnection(sqlstr);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter("select * from airport where EnName like '%" + id + "%' or CnName like '%"+id+"%'", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            sb.Append(ds.Tables[0].Rows[i][2].ToString() + "   "+ds.Tables[0].Rows[i][1].ToString() + "$");
        }
        Response.Write(sb.ToString());

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More