Prompt data is displayed below the search box (data is AJAX read)

1. Front Page

1<div style="margin:0 Auto">2<input type="text"Id="Wenxiantxt"onkeyup="clickevent ()"style="width:250px; height:25px"/>3<ul id=" All"style="Width:250px;height:auto; margin-top:0px;">4</ul>5</div>

2. Backstage Code

1 [WebMethod]2          Public Static stringGetjson (stringURLs)3         {4HttpWebRequest request =(HttpWebRequest) webrequest.create (URLs);5Request. Method ="GET";6Request. ContentType ="Application/json; Charset=utf-8";7HttpWebResponse response =(HttpWebResponse) request. GetResponse ();8Stream Myresponsestream =Response. GetResponseStream ();9StreamReader Mystreamreader =NewStreamReader (Myresponsestream, Encoding.UTF8);Ten             stringRetString =mystreamreader.readtoend (); One mystreamreader.close (); A myresponsestream.close (); -  -             returnretstring; the  -}

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) {varJsondata = eval ("("+ DATA.D +")"); $("#all"). empty (); //Debugger;                     for(vari =0; I < jsondata['Data'].length; i++) {                        varHTML2 =""; HTML2+="<li>"+ jsondata['Data'][i] +"</li>"; $("#all"). Append (HTML2); }                    //Select the text of the search hint to the search box$("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. Display style

Select one to text box

Prompt data is displayed below the search box (data is AJAX read)