Several modifications and enhancements to the AutoComplete control of Microsoft Asp.net Ajax 1.0

The AjaxControlToolkit series controls released with Asp.net Ajax 1.0 bring a lot of convenience to developers, but many of them seem not as perfect as we think. Recently, many AutoComplete controls have been used here and several shortcomings or errors have been found:
1. In some cases, the error "two components with the same id" may occur;
2. It is easy to see "unable to open the Internet site ,..., Operation terminated;
3. Even if the user has entered many characters, even if no matching result exists, it will still call the server method to try to obtain the matching value, which increases the burden on the server in vain;
4. the style of the automatically completed list is not very nice;
5. The signature of the server method must be string [] GetCompletionList (string prefixText, int count). Other required data cannot be obtained from the client. This is especially fatal when multiple AutoComplete controls on a page need to obtain data from different data sources.

To solve these problems, you must first know how to modify the corresponding code and make it take effect in your own applications. Fortunately, the AjaxControlToolkit controls are open-source, so we can modify them as needed. Use VS2005 to open the AjaxControlToolkit solution and open AutoCompleteBehavior In the AutoComplete folder. js file, modify and re-compile the generated AjaxControlToolkit. update the dll file to your project reference, and you can apply the AutoComplete control after optimization and enhancement.

So what code should I modify?
To solve the first problem, add the following before AjaxControlToolkit. AutoCompleteBehavior. callBaseMethod (this, 'dispose:

If (this. _ popupBehavior ){
This. _ popupBehavior. dispose ();
This. _ popupBehavior = null;
}

The second problem is to change document. body. appendChild (this. _ completionListElement) to element. parentNode. appendChild (this. _ completionListElement );

The third problem is that in the _ onTimerTick method, if (text. trim (). length <this. _ minimumPrefixLength) adds a condition to the judgment to be: if (text. trim (). length <this. _ minimumPrefixLength | text. trim (). length> 10), so that when the user input exceeds 10 characters, you do not have to call the server to read the matching value.

To adjust the automatic Completion list style, you can directly modify the following code in the initializeCompletionList method:

CompletionListStyle. backgroundColor = this. _ textBackground;
CompletionListStyle. color = this. _ textColor;
CompletionListStyle. border = 'solid 1px buttonshadow ';
CompletionListStyle. cursor = 'default ';
CompletionListStyle. unselectable = 'unselectable ';
CompletionListStyle. overflow = 'ddd ';

Or delete the rows and add: element. className = "completionList". Then, add the Style Class "completionList" on the page;

To solve the last problem, add a parameter to the server in the row {prefixText: this. _ currentPrefix, count: this. _ completionSetCount} and change it:
{PrefixText: this. _ currentPrefix, count: this. _ completionSetCount, srcId: this. get_element (). getAttribute ("srcid ")}
Therefore, the method signature of the automatically completed list item can be written as: string [] GetCompletionList (string prefixText, int count, string srcId ). This means that we can pre-set an identifier string for the text box that requires the Automatic completion function to identify its data source, C # Code such as tb. attributes. add ("srcid", "xxx"); then, in the GetCompletionList method, you can read data according to the parameter value passed by the client.