There is nothing left to worry about. I wrote a small function for refreshing new data queries to display the information. It is similar to Baidu and Google's search prompt functions. Hoho
Implementation principle: When a value is input in the text box, the background data is asynchronously called, and the $. get (). in the background data section, after receiving the parameters passed by the URL, query the data stored in XML. if yes, input it. A simple little feature! You have practiced. Hoho !!!
:
1. Enter Chinese pinyin:
Enter Li in the text box. Chinese characters starting with Li in Chinese pinyin will be displayed later.
2. Enter Chinese characters:
Enter a Chinese character in the text box, such as Li. The prompt displays all information starting with Li.
Below isCode:
HTML code
. 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;
}
<Body>
<Form ID = "form1" runat = "server">
<Div id = "Main">
<Input id = "searchbox" type = "text" onpropertychange = "searchjshelper. showsearchkeytip (this)" oninput = "searchjshelper. showsearchkeytip (this)"/>
<Div id = "searchresult">
Enter the name to query
</Div>
</Div>
</Form>
</Body>
Javascript Section
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 ");
}
// Create an Instance Object of the scripthelper class. It is used globally.
VaR searchjshelper = new searchjs ();
Background Data:
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 ("lelemessages. xml "));
VaR variables les = 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 minutes les)
{
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 data:
<? XML version = "1.0" encoding = "UTF-8"?>
<Messages>
<People>
<Enname> Lisboa ibin </enname>
<Cnname> Li Shuai bin </cnname>
<Message>
I just want to do Program Clerk!
</Message>
</People>
<People>
<Enname> zhangxianbo </enname>
<Cnname> Zhang San </cnname>
<Message>
I'm James, and I just want to be a programmer!
</Message>
</People>
<People>
<Enname> linsi </enname>
<Cnname> Lin Si </cnname>
<Message>
Hoho, I'm a cool man!
</Message>
</People>
<People>
<Enname> jiangwu </enname>
<Cnname> Jiang Wu </cnname>
<Message>
I am also a cool man. Why!
</Message>
</People>
<People>
<Enname> liuliu </enname>
<Cnname> Liu </cnname>
<Message>
You have a big face!
</Message>
</People>
</Messages>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
