下拉提示(GoogleSuggest)

樣式:  

<style type="text/css">

.autocomplete{width:200px;border:1px solid #999;background:white;position:absolute;overflow:hidden; list-style-type:none; padding-left:0;margin-left:0px; margin-top:0;}

    </style>


JS:(Jquery)

<script type="text/javascript" language="javascript">
    var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#<%=search.ClientID %>");
    $("#<%=search.ClientID %>").keyup(function () {

        $.post("Handler.ashx", { "searchText": $("#<%=search.ClientID %>").val() }, function (data) {

            if (data.length) {
                $autocomplete.empty();

                var arr = data.substring(0, data.length - 1).split(',');
                $.each(arr, function (index, term) {
                    $("<li></li>").text(term).appendTo($autocomplete).mouseover(function () {
                        $(this).css("background", "green");
                    }).mouseout(function () {
                        $(this).css("background", "white");
                    })
                          .click(function () {
                              $("#<%=search.ClientID %>").val(term);
                              $autocomplete.hide();
                          });
                });
                $autocomplete.show();
            }

        });
    }).blur(function () {
        setTimeout(function () {
            $autocomplete.hide();
        }, 500);

    });
          </script>


AjAx:

public void ProcessRequest (HttpContext context) {
        BLL.Hotel bHotel = new BLL.Hotel();
        context.Response.ContentType = "text/plain";
        string teststr = context.Request.Form["searchText"];
        DataTable dt = bHotel.GetHotelName(teststr).Tables[0];
        string str = null;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            str += dt.Rows[i]["HotelName"]+",";
        }
        context.Response.Write(str);
    }


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