搜索框下面显示提示数据（数据是ajax读取）

程序员东亚技术 2022年11月21日

0 收藏 379 点赞 2,606 浏览 1609 个字

1、前台页面

 <div style="margin: 0 auto">
         <input type="text" id="wenxiantxt" onkeyup="ClickEvent()" style="width: 250px; height: 25px" />
         <ul id="all" style="width:250px;height: auto; margin-top: 0px;">
         </ul>
     </div>

2、后台代码

 [WebMethod]
         public static string GetJson(string urls)
         {
             HttpWebRequest request = (HttpWebRequest)WebRequest.Create(urls);
             request.Method = "GET";
             request.ContentType = "application/json; charset=utf-8";
             HttpWebResponse response = (HttpWebResponse)request.GetResponse();
             Stream myResponseStream = response.GetResponseStream();
             StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);
             string retString = myStreamReader.ReadToEnd();
             myStreamReader.Close();
             myResponseStream.Close();             return retString;         }

3、jquery

<style type="text/css">
        ul li
        {
            list-style: none;
            font-size: 12px;
            text-decoration: none;
            color: gray;
            cursor: pointer;
            padding: 0px;
            margin-left: -35px;
        }
  </style>
 <script type="text/javascript">
        function ClickEvent() {
            urls = "http://www.suggest?&q=hiv&src=cn";
            $.ajax({
                type: "Post",
                async: false,
                url: "2_sousuotishi.aspx/GetJson",
                contentType: "application/json; charset=utf-8",
                data: "{urls:'" + urls + "'}",
                dataType: "json",
                success: function (data) {
                    var jsondata = eval("(" + data.d + ")");
                    $("#all").empty();
                    //debugger;
                    for (var i = ; i < jsondata['data'].length; i++) {
                        var html2 = "";
                        html2 += "<li>" + jsondata['data'][i] + "</li>";
                        $("#all").append(html2);
                    }
                    //选择搜索提示的文本到搜索框
                    $("li").on("click", function () {
                        $("#wenxiantxt").val($(this).text());
                        $("#all").html("");
                    });
                    $("li").mousemove(function () {
                        $("li").css("background-color", "");
                        $(this).css("background-color", "gray");
                        $("li").css("color", "gray");
                        $(this).css("color", "white");
                    });
                },
                error: function (err) {
                    alert("error！");
                }
            });
        }
    </script>