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

1、前台页面

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

4、显示样式

选中一个到文本框