(A few new demos recently) (imitating the baidu search box) is more practical in subsequent updates.

Similar to a Baidu search, data on a div is dynamically bound after the onkeyup event of each text box control is displayed in the output of Chinese characters or letters.

Pass to the backend parameters to the database for query and then return the JS string. The frontend binding cannot respond as quickly as Baidu, but it still works.

CodeConnection download

Http://www.baidupcs.com/file/e79ec71b4e34e7b0e419f7db9ab95c46? FID = 2467423588-250528-2904392524 & time =
1362979535 & Sign = FDTA-DCb740ccc5511e5e8fedcff06b081203-ljLhFldhAtuvjKTqSjn4qTkD5IQ % 3d & expires = 1 h

The downloaded code does not contain any database or background database access code.

The Database Design ID name (searchable condition) namepy (searchable condition) does not matter. Custom

String SQL = string. Format ("select top 10 ID, Region name from hopl where Hoppy like '% {0} %'", strpy );
Datatable dt = dbtools. DB. executedataset (commandtype. Text, SQL). Tables [0];
If (Dt. Rows. Count <= 0)
{
SQL = string. Format ("select top 10 ID, Region name from hopl where region name like '% {0} %'", strpy );
Dt = dbtools. DB. executedataset (commandtype. Text, SQL). Tables [0];
}
Return windows_json.jsonhelper.tojson (DT );

If you cannot find the pinyin alphabet, the name is queried.

Here we use a datatable to convert the JSON class.

Public static string tojson (datatable DT)
{
Stringbuilder jsonstring = new stringbuilder ();
Jsonstring. append ("[");
Datarowcollection DRC = DT. Rows;
For (INT I = 0; I <DRC. Count; I ++)
{
Jsonstring. append ("{");
For (Int J = 0; j <DT. Columns. Count; j ++)
{
String strkey = DT. Columns [J]. columnname;
String strvalue = DRC [I] [J]. tostring ();
Type type = DT. Columns [J]. datatype;
Jsonstring. append ("\" "+ strkey + "\":");
Strvalue = stringformat (strvalue, type );
If (j <DT. Columns. Count-1)
{
Jsonstring. append (strvalue + ",");
}
Else
{
Jsonstring. append (strvalue );
}
}
Jsonstring. append ("},");
}
// Cause of zhanghao 2012 01 14: The matched '[' is deleted.
If (DRC. Count> 0)
{
Jsonstring. Remove (jsonstring. Length-1, 1 );
}

Jsonstring. append ("]");
Return jsonstring. tostring ();
}

You can use it in the past.

Now we are mainly concerned about the front-end. The preparation of the front-end is more troublesome than that of the background.

<Div class = "Main">
<Div class = "Global">
<Ul id = "K">
<Li>
<Input type = "text" id = "TXT" style = "width: 190px; Height: 20px;"/> </LI> </ul>
</Div>
<Div id = "T">
<Div class = "M" style = "display: none; Height: auto;" id = "div_content">
</Div>
</Div>
<Input type = "text" style = "display: none"/>
</Div>

First, a text box. The following is the code for div download to be displayed. You can use it if you only need a part.

Bind events first

$ (Document). Ready (function (){
$ ('# TXT'). BIND ('keyup', processkeyup );
});

Then process the mouse operation event

Function processkeyup (event ){
// Var myevent = event | Windows. event;
VaR keycode = event. keycode;
If (keycode = 13 ){

Processenter (); // press ENTER
}
Else if (keycode = 38 | keycode = 40 ){
Processkeyupanddown (keycode); // you can call this operation by pressing the up or down key.
}
Else {
Show (); // press another key to query data.
}
}

Press enter to put the selected content in the text box and then perform the operation. Here, we bind data.

Function processenter (){
If (highlightindex! =-1 ){
('Txt'{.val({('{div_content'}.children().eq(highlightindex}.html ());
VaR TMP = ('{div_content'{.children().eq(highlightindex}.html ();
Certificate ('audio div_content'audio .html (''). Hide ();
Hid22 (TMP );
}
}

Press the up/down key

Function processkeyupanddown (keycode ){
VaR words = $ ('# div_content'). Children (); All labels of the currently displayed Div
VaR num = words. length;
If (Num <= 0) return;
Changetowhite (); // select a tag
Highlightindex = (keycode! = 38? Num + 1: num-1) + highlightindex) % num; // calculate the current tag
Words.eq(highlightindex).css ('background-color', 'pink'); // change the color
#('{Txt'{.val(words.eq(highlightindex}.html (); // put the text of the selected tag in the text box
}
Function changetowhite (){
If (highlightindex! =-1 ){
Certificate ('{div_content'{.children().eq(highlightindex}.css ('background-color', 'Gray ');
}
}