JQuery+Ajax實現無重新整理資料查詢

最後更新：2018-12-06 來源：互聯網

上載者：User

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

閑來無事,寫了一個無重新整理資料查詢的小功能,來顯擺顯擺. 類似baidu、google的搜尋提示功能。hoho

實現原理,在文字框輸入值時,非同步呼叫後台資料,方法用JQuery中的$.get().後台資料資料部分,接收到URL傳過來的參數後,查詢儲存在XML中的資料.如果匹配,則輸入出來.很簡單的一個小功能!孜當練習了.hoho!!!

1、輸入漢語拼音：

在文字框中輸入li,以後li為開頭的漢語拼音的中文字元都會提示出來。

2、輸入漢字：

在文字框中輸入中文字元，例如李，提示資訊就出顯示出以李開頭的所有資訊。

以下是代碼：

HTML代碼部分
.divTip
{
font-size: 12px;
width: 100%;
font-family: Arial;
border: dashed 1px #d7d7d7;
position:static;
margin: 20px 0 0 0;
height:30px;
line-height:30px;
background-color:#f5f5f5;
}

#main
{
width: 400px;
height:400px;
border: solid 1px #06c;
position: absolute;
top: 50%;
left:50%;
margin: -200px 0 0 -200px;

}
#searchBox
{
position: absolute;
margin: 0 0 0 0;
}

      <div id="main">
        <input id="searchBox" type="text" onpropertychange="searchJsHelper.ShowSearchKeyTip(this)" oninput="searchJsHelper.ShowSearchKeyTip(this)" />
        <div id="searchResult">
            請輸入要查詢的姓名
        </div>
    </div>

</form>
</body>

JavaScript 部分

var SearchJs = function(){}

SearchJs.prototype.ShowSearchKeyTip = function(o){
    var t;
    if(o.value == "")
    {
        $("#searchResult").css("display","none");
        return ;
    }
    $("#searchResult").css("display","block");

    $.get("SearchHandler.ashx?key=" + encodeURIComponent(o.value), function(data){
        var arr = data.split("|");
        $("#searchResult").empty();
        for(var i=0;i<arr.length;i++)
        {
            t = setTimeout('searchJsHelper.HiddenSearchKeyTip()',10000);
            var d = document.createElement("DIV");
            d.style.cursor = "hand";
            d.id="div" + i;

            d.className = "divTip";
            d.innerText = arr[i];

            $("#"+ d.id).mouseover(function(){
                clearTimeout(t);
                $("#"+ d.id).css("display","block");
            });
            $("#"+ d.id).mouseout(function() {
                t = setTimeout('searchJsHelper.HiddenSearchKeyTip()',10000);
            });

            $("#searchResult").append(d);
        }
    });

    $("#searchResult").mouseover(function(){
        clearTimeout(t);
        $("#searchResult").css("display","block");
    });
    $("#searchResult").mouseout(function() {
        t = setTimeout('searchJsHelper.HiddenSearchKeyTip()',10000);
    });
}

SearchJs.prototype.HiddenSearchKeyTip = function(o){
$("#searchResult").css("display","none");
}

//建立scriptHelper類的一個執行個體對象.全域使用.
var searchJsHelper = new SearchJs();

後台資料部分:

SearchHandler.ashx

      public String SearchKey
        {
            get{
                if (HttpContext.Current.Request.QueryString["key"] != null)
                {
                    return HttpContext.Current.Server.UrlDecode(HttpContext.Current.Request.QueryString["key"].ToString());
                }
                else
                    return string.Empty;
            }
        }

        public void ProcessRequest(HttpContext context)
        {
            StringBuilder sb =new StringBuilder(1024*500);

            XDocument xml = XDocument.Load(context.Server.MapPath("PeopleMessages.xml"));
            var peoples = from p in xml.Root.Elements("people")
                          select new
                          {
                              enname = p.Element("ENName").Value,
                              cnname = p.Element("CNName").Value,
                              message = p.Element("message").Value
                          };
            foreach (var p in peoples)
            {
                var s = p.enname.Trim();
                var c = p.cnname.Trim();
                var m = p.message.Trim();
                if (s.Length >= SearchKey.Length)
                {
                    if (SearchKey == s.Substring(0, SearchKey.Length))
                    {
                        sb.Append(c + ": " + m + "|");
                    }
                }
                if (c.Length >= SearchKey.Length)
                {
                    if (SearchKey == c.Substring(0, SearchKey.Length))
                    {
                        sb.Append(c + ": " + m + "|");
                    }
                }
            }

            context.Response.ContentType = "text/plain";
            context.Response.Write(sb.ToString().Substring(0, sb.ToString().Length - 1));
        }

XML資料部分:

<?xml version="1.0" encoding="utf-8" ?>
<Messages>
<people>
  <ENName>lishuaibin</ENName>
  <CNName>李帥斌</CNName>
  <message>
   我只是想做個程式員！
  </message>
</people>
<people>
  <ENName>zhangxianbo</ENName>
  <CNName>張三</CNName>
  <message>
   我是張三，我也只是想做個程式員！
  </message>
</people>
<people>
  <ENName>linsi</ENName>
  <CNName>林四</CNName>
  <message>
   hoho，我是個牛人！
  </message>
</people>
<people>
  <ENName>jiangwu</ENName>
  <CNName>薑五</CNName>
  <message>
   我也是牛人，哪說理去呀！
  </message>
</people>
<people>
  <ENName>liuliu</ENName>
  <CNName>劉六</CNName>
  <message>
   你們臉真大!
  </message>
</people>
</Messages>

本文章原先以中文撰寫並發佈於 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