Encapsulate an automatic search box. The prototype is autocomplete.

1. Several library files are required

Jquerydatabase, jquery-uidatabase, jquery-ui-1.10.3.custom.min.css style table Library (of course, some IMG effects are omitted, you can download them on the official website)

2. Let's look at the prototype effect code:

<PC3: ccstyle id = "ccstyle2" runat = "server" href = "UI-lightness/jquery-ui-1.10.3.custom.min.css"/> <input runat = "server" type = "text" class = "input" ID = "txtparent"/> <span style = "color: #666; font-style: italic; "> automatic search... </span> <SCRIPT src = ".. /.. /JS/jquery-1.6.min.js "type =" text/JavaScript "> </SCRIPT> <SCRIPT src = ".. /.. /JS/jquery-ui-1.10.3.custom.min.js "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript "> $ (function () {var T = '<% = initializecontrol () %>'; var availabletags = T. split (','); $ ("# txtparent "). autoComplete ({Source: availabletags });});.....

Note: <PC3: ccstyle is a custom control that is used to load the corresponding CSS file. It has nothing to do with it. You can drag the style sheet in the same way.

Initializecontrol () is a background method used to obtain strings and split them into character arrays. In this way, you can use the autocomplete method provided by the jquer UI library to bind objects. As follows:

The key HTML after page rendering is as follows:

3. Let's further process it and bind it into a user control (of course, it can also be made into a custom control)

Create a user control called searchbox. ascx and enter the following code:

<% @ Control Language = "C #" autoeventwireup = "true" codefile = "searchbox. ascx. CS "inherits =" control_searchbox "%> <% @ register Assembly =" cccontrol "namespace =" cccontrol "tagprefix =" cached "%> <PC3: ccscript id = "ccscript2" runat = "server" src = "jquery-1.7.2.min.js"> </PC3: ccscript> <PC3: ccscript id = "ccscript1" runat = "server" src = "jquery-ui-1.10.3.custom.min.js"> </PC3: ccscript> <PC3: ccstyle id = "ccstyle1" runat = "server" href = "UI-lightness/jquery-ui-1.10.3.custom.min.css"> </PC3: ccstyle> <style type = "text/CSS">. UI-menu-item {font-size: 12px ;}. serach-box-Sty-cus {Line-Height: 22px; Height: 22px; Border: 1px groove # CCC; font-size: 14px; margin-top: 0px; font-family: Arial,; color: # e89830; font-weight: bold ;}</style> <asp: textbox runat = "server" cssclass = "serach-box-Sty-cus" id = "txtsearchbox"/> <span style = "color: #666; font-size: 12px; font-style: italic; "> automatic search... </span> <input runat = "server" type = "hidden" id = "hidsearchbox"/> <SCRIPT type = "text/JavaScript" >$ (function () {var T = '<% = initializecontrol () %>'; var availabletags = T. split (','); $ ("# <% = txtsearchbox. clientid %> "). autoComplete ({Source: availabletags}) ;}); </SCRIPT>

Background code:

Protected void page_load (Object sender, eventargs e) {} private string _ datasetcachename; /// <summary> /// data cache name /// </Summary> Public String datasetcachename {get {return test_bul.sysparam.cache_searchboxprefix + _ datasetcachename ;} set {_ datasetcachename = value;} private string _ strsql; /// <summary> /// obtain the SQL statement executed by the data source // </Summary> Public String strsql {get {return _ strsql;} set {_ Strsql = value ;}/// <summary> // obtain the value of the search box /// </Summary> Public String searchboxvlue {get {return this.txt searchbox. text. trim () ;}/// <summary> // initialize the autocomplete data source /// </Summary> protected string initializecontrol () {dataset _ DS; If (tools. cacheutil. isexist (datasetcachename) // test_bul.sysparam.cacheparamsearch {_ DS = (Dataset) tools. cacheutil. getcache (datasetcachename); Return getau Tocompletearray (_ DS);} else {using (_ DS = test_bul.sys_common.instance.getlist (strsql) {tools. cacheutil. insertcach (datasetcachename, (object) _ DS, 10, 6); // test_bul.sysparam.cacheparamsearch return getautocompletearray (_ DS );}}} /// <summary> /// obtain the autocomplete data source /// </Summary> /// <Param name = "ds"> Target dataset </param> private string getautocompletearray (dataset DS) {If (tools. validator. checkdata Set (DS, 0) {system. text. stringbuilder strb = new system. text. stringbuilder (""); int _ COUNT = Ds. tables [0]. rows. count; For (INT I = 0; I <_ count; I ++) {strb. append (tools. validator. getfieldvalue (DS, I, "name"); strb. append ("|"); strb. append (tools. validator. getfieldvalue (DS, I, "ID"); strb. append (I <_ count-1? ",": "");} Return strb. tostring ();} else return "";}

For the sake of efficiency, the data is cached (the cache class is not pasted, and the corresponding key values of all caches are placed in a separate class for easy maintenance ), this search box may be used in multiple places, so there may be a lot of cached object data.

Of course, the data source here is the DS in the database. We can read the xml configuration file for processing. The principle is the same, so I won't say much about it.

4. Call method:

A text page is created and a short code is added.

Header reference <% @ register src = "~ /Control/searchbox. ascx "tagprefix =" CTL "tagname =" searchbox "%> test code <input runat =" server "id =" text1 "class =" int "Title =" type "input" "/> <CTL: searchbox runat = "server" id = "shbox"/> <asp: button runat = "server" id = "btnsend" text = "Submit" onclick = "btnsend_click"/>

Background code

Protected void page_load (Object sender, eventargs e) {setsearchbox ();} protected void btnsend_click (Object sender, eventargs e) {This. autoComplete. value = This. shbox. searchboxvlue;} // <summary> // set the search box // </Summary> private void setsearchbox () {This. shbox. strsql = "select .. fron .. where... "; this. shbox. datasetcachename = "tablename_pagename ";}

The effect is displayed, just like above.

PS: We recommend that you use xml configuration for a small amount of data without wasting resources. Of course, we can understand the method of getting data from the database.

If you do not understand, add QQ group: 14670545