Recently in a project, the need to fill in the administrative divisions, in order to prevent users to fill out errors, should use a drop-down selection to replace the text input, but the National administrative division has more than 3,000, with the Drop-down to choose is not realistic, finally decided to use a text box, but the automatic completion to avoid user input Here I fill in a product name to explain, as shown in the following figure:
Implementations are implemented using ASP.net client callbacks, including implementation ICallbackEventHandler, which can specify any page implementation, including implementing a RaiseCallbackEvent method, It returns a string to the client callback function
Additionally, the page must contain three client script functions that perform the following actions:
A function calls the helper method, which executes the actual request to the server. In this function, you can first execute the custom logic to prepare the event arguments, and then you can send a string as a parameter to the server-side callback event handler.
Another function is called by the result of the server code that handles the callback event and receives the result, while the string representing the result is accepted. This function is called the clientcallback function.
The third function is the Helper function that executes the actual request to the server, which is automatically generated by ASP.net when a reference to this function is generated using the GetCallbackEventReference method in server code.
Every time the client presses the keyboard in the text box, the system executes client script, the client-side callback function is invoked in client script, the client callback function initiates a callback to the server, triggers the raisecallbackevent, Finally, the received data is sent back to the client by GetCallbackResult, and the client receives the data and processes it.
Here's the code:
Using System;
Using System.Data;
Using System.Configuration;
Using System.Collections;
Using System.Web;
Using System.Web.Security;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Using System.Web.UI.WebControls.WebParts;
Using System.Web.UI.HtmlControls;
Using System.Collections.Generic;
Public partial class _default:system.web.ui.page, ICallbackEventHandler
{
ilist<product> list = null;
protected void Page_Load (object sender, EventArgs e)
{
Registering a client callback
Registerclientcallbacks ();
}
private void Registerclientcallbacks ()
{
String callbackref = Clientscript.getcallbackeventreference (This, "Arg", "recieveserverdata", "context");
string script = String.Empty;
if (! Clientscript.isclientscriptblockregistered ("CallServer"))
{
Script = "function CallServer (arg,context) {" + Callbackref + "}";
Clientscript.registerclientscriptblock (this. GetType (), "CallServer", script, True);
}
}
public string GetCallbackResult ()
{
return htmltablehelper.convertproductlisttotable (list); Make a special paragraph of the product list HTML code, you can embed in the div and other tags. Htmltablehelper is a class written by itself, and the code is simple.
}
public void RaiseCallbackEvent (String eventargument)
{
if (String.IsNullOrEmpty (eventargument)) return;
List = Productrepository.getproducts (eventargument);
}
}
Client code:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>demo auto-suggest callback</title>
<link href= "Site.css" rel= "stylesheet" type= "Text/css"/>
<body>
<form id= "Form1" runat= "Server" >
<div>
<strong><span style= "font-size:14pt" > Use client callback to implement AutoComplete <br/>
<br/>
</span></strong>
<br/>
Enter product Name: <input type= "text" onkeydown = "return Getkeytype (Event)" onkeyup = "return GetProducts (Event)" Id= "Txtsearch "Name=" Txtsearch "/>
<div id= "Results" >
</div>
</div>
</form>
</body>
<script language= "javascript" type= "Text/javascript" >
var word = ';
var up = 38;
var down = 40;
var ENTER = 13;
var index =-1;
var TAB = 9;
var BACKSPACE = 8;
var table = null;
var rows = null;
var selectedrow = null;
function Getkeytype (e)
{
var keynum;
if (window.event)
{
Keynum=e.keycode;
}
else if (E.which)
{
Keynum=e.which;
}
if (Keynum = = ENTER)
return false;
}
function GetProducts (e)
{
var keynum
var Keychar
var Numcheck
if (window.event)//IE
{
Keynum = E.keycode
}
else if (E.which)//Netscape/firefox/opera
{
Keynum = E.which
}
Keychar = String.fromCharCode (keynum)
Numcheck =//d/
If the down key is pressed
if (Keynum = down)
{
Movecursordown ();
Return
}
else if (Keynum = up)
{
Movecursorup ();
Return
}
else if (Keynum = = ENTER)
{
if (selectedrow!=null)
{
if (Isfirefox ())
{
if (selectedrow.childnodes[1].innerhtml!= ')
{
document.getElementById ("Txtsearch"). Value = selectedrow.childnodes[1].innerhtml;
}
}
Else
{
if (selectedrow.innertext!= ')
document.getElementById ("Txtsearch"). Value = Selectedrow.innertext;
}
document.getElementById ("Results"). InnerHTML = ';
}
False is returned so this postback won ' t occur when the return key is pressed
return false;
}
Word=document.getelementbyid ("Txtsearch"). Value;
Call the server side method
CallServer (Word, "");
}
function Isfirefox ()
{
return (navigator.appname = ' Netscape ');
}
function Movecursorup ()
{
Selectedrow = null;
Table = document.getElementById ("MyTable");
if (table = = null) return;
rows = Table.getelementsbytagname ("TR");
if (Index > 0)
{
index--;
}
Setdefaultrowcolor ();
Selectedrow = Rows[index];
Selectedrow.classname = ' Highlightrow '
}
function Movecursordown ()
{
Selectedrow = null;
Table = document.getElementById ("MyTable");
if (table = = null) return;
rows = Table.getelementsbytagname ("TR");
if (Index < rows.length)
{
if (Index < rows.length-1)
{
index++;
}
Setdefaultrowcolor ();
Selectedrow = Rows[index];
Selectedrow.classname = ' Highlightrow ';
}
}
function Setdefaultrowcolor ()
{
for (i=0;i<rows.length;i++)
{
Rows[i].classname = ' Defaultrowcolor ';
}
}
function Recieveserverdata (response)
{
document.getElementById ("Results"). InnerHTML = response;
}
</script>
The overall system implementation process is as follows:
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
