The AjaxControlToolkit series controls released with Asp.net Ajax 1.0 have brought a lot of convenience to developers, but many of them do not seem to be as perfect as we imagined. I have been using the AutoComplete control a lot recently and found several shortcomings or errors:
1. In some cases, the error "two components with the same id" will occur;
2. It is easy to cause the problem of "Unable to open the Internet site,..., the operation has been terminated" in IE;
3. Even if the user inputs a lot of characters, even if there is no matching result, 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 auto-complete 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 there are multiple AutoComplete controls in a page that need to obtain data from different data sources.
To solve these problems, you first need to know how to modify the corresponding code and make it effective in your own application. Fortunately, the AjaxControlToolkit series controls are open source, so we can modify them according to our own needs. Open the AjaxControlToolkit solution with VS2005, open the AutoCompleteBehavior.js file in the AutoComplete folder, modify and recompile, and update the generated AjaxControlToolkit.dll file to your own project reference to apply our optimized and enhanced AutoComplete control .
So, what specific code needs to be modified?
For the first question, you need to add before the line AjaxControlToolkit.AutoCompleteBehavior.callBaseMethod(this, 'dispose');:
if (this._popupBehavior) {
this._popupBehavior.dispose();
this._popupBehavior = null;
}
The second question is to change the line document.body.appendChild(this._completionListElement); to element.parentNode.appendChild(this._completionListElement);
The third question is to use if (text. trim().length < this._minimumPrefixLength) This judgment adds a condition and becomes: if (text.trim().length < this._minimumPrefixLength || text.trim().length > 10) , which makes, when When the user's input exceeds 10 characters, there is no need to call the server to read the matching value.
The fourth question, to adjust the style of the auto-complete list, 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 = 'hidden';
, or delete these lines and add: element.className = "completionList"; Then add the definition of the style class "completionList" on the page;
to solve the last problem, it should be in { prefixText: this._currentPrefix, count: this._completionSetCount} Add a parameter sent to the server in this line, which becomes:
{ prefixText: this._currentPrefix, count: this._completionSetCount, srcId: this.get_element().getAttribute("srcid") }
Therefore, the server-side method signature for reading auto-complete list items can be written as: string[] GetCompletionList(string prefixText, int count, string srcId). This means that we can pre-set an identification string to identify its data source for the text box that needs to apply the auto-complete function. The C# code is such as: tb.Attributes.Add("srcid", "xxx"); Then, In the GetCompletionList method, data can be read in a targeted manner based on the parameter value passed by the client.