Hi,

i am searchin for a Solution which make it possible to show more than one colum with the AutoCompleteExtender.

The reason is that i use the Control for a search. The user has to type the name of a City. The problem is, that the cityname is´nt unique, so i have to give the user more informations to the Results.

Example:

The User types

"bergen"

  for "bergen" in the Database are 3 entries which have a different Postcode

So the dropdownlist show three times "bergen"

When the dropdownlist could show this "bergen  12345" next line "bergen  54789" and so on, this would be perfekt.

I have found an Example in which someone has changed the result value from the webservice from a Stringarray to XmlDocument. So he has changed the AutoCompleteBehavior.js and the ServiceMethod.

The resultlist is shown in a Table. This works fine with the Release of the AjaxControlToolKit. But in the Release, there are problems with scrollbars which were shown when the Resultlist is to long, and they have to be show because i didn´t limit the resultlist.

So i downloaded the latest Version and i have tried the code to adapt.

Here is the code where the table for the Resultlist is created.

    _update: function(prefixText, completionItems, cacheResults) {
        /// <summary>
        /// Method to update the status of the autocomplete behavior
        /// </summary>
        /// <param name="prefixText" type="String" DomElement="false" mayBeNull="true" />
        /// <param name="completionItems" type="Object" DomElement="false" mayBeNull="true" />
        /// <param name="cacheResults" type="Object" DomElement="false" mayBeNull="true" />
        /// <returns />      
        if (cacheResults && this.get_enableCaching()) {
            if (!this._cache) {
                this._cache = {};
            }
            this._cache[prefixText] = completionItems;
        }
   doc = completionItems.documentElement;  
var items = completionItems.getElementsByTagName('ROW');

        this._completionListElement.innerHTML = '';
        this._selectIndex = -1;
        var _firstChild = null;
        if (completionItems && completionItems.length) {
 
var newtable = document.createElement("TABLE");
            newtable.width='100%';
            var newtbody = document.createElement("TBODY");
            newtable.appendChild(newtbody);
           
for (var i = 0; i < completionItems.length; i++) {
                //if (this._completionListElementID) {
                //    // the completion element has been created by the user and li won't necessarily work
                //    var itemElement = document.createElement('div');
                //} else {
                //    var itemElement = document.createElement('li');
                //}
               
var newtr = document.createElement("TR");
               
for ( var j=items[i].firstChild ; j!=null ; j=j.nextSibling ){
                    // create column
                    var newtd = document.createElement("TD");
                    var itemdata;
                    if ( document.all )
                        itemdata = j.text;
                    else
                        itemdata = j.textContent;
                   
                    if ( j.nodeName == this._returnColumn )
                        newtr.title = itemdata;
                    if ( j.nodeName == "ROWINDEX" )
                        continue;
                       
                    newtd.appendChild(document.createTextNode(this._getTextWithInsertedWord(itemdata)));
                    newtr.appendChild(newtd);
                }
                newtbody.appendChild(newtr);
                // set the first child if it is null
                if( _firstChild == null ){
                    _firstChild = newtr;
                }

               
                if (this._completionListItemCssClass) {
                    Sys.UI.DomElement.addCssClass(newtr, this._completionListItemCssClass);
                } else {
                    var itemElementStyle = newtr.style;
                    itemElementStyle.padding = '1px';
                    itemElementStyle.textAlign = 'left';
                    itemElementStyle.textOverflow = 'ellipsis';
                    itemElementStyle.backgroundColor = this._textBackground;
                    itemElementStyle.color = this._textColor;
                }
               
            }
            this._completionListElement.appendChild(newtable);
           
            //var elementBounds = CommonToolkitScripts.getBounds(this.get_element());       
            //this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
            this._completionListElement.scrollTop = 0;
           
            this.raisePopulated(Sys.EventArgs.Empty);
           
            var eventArgs = new Sys.CancelEventArgs();
            this.raiseShowing(eventArgs);
            if (!eventArgs.get_cancel()) {
                this.showPopup();
                // Check if the first Row is to be selected by default and if yes highlight it and updated selectIndex.
                if (this._firstRowSelected && (_firstChild != null)) {
                    this._highlightItem( _firstChild );
                    this._selectIndex = 0;
                }
            }           
        } else {
            this._hideCompletionList();
        }
    }   
}

Edit:

Propertys of the Control on the Webpage:

<div id="listPlacement" style="height: 100px; width: 300px; overflow-y:scroll" >

</div>

<ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" CompletionInterval="500"

CompletionListElementID="listPlacement" CompletionSetCount="20" EnableCaching="true"

MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ReturnColum="Ort"

ServicePath="AutoComplete.asmx" TargetControlID="TextBox1">

I can´t post the whole code because it is to long. But you can download it from http://download.hpinfomedia.de/Ajax/AutoCompleteBehavior.js

With this Code noting happend when the user types anything.

I don´t know how debug the Code and i am not sure that i can this because i use only the Visual Web Developer and for creating the new dll i use SharpDevelop 2.1

I hope someone can help me.

Thanks

Christian

No one who kann help me?

 Hi,

My only suggestion is that you need to debug the js file. This can be done with Visual Web Developer.

Please refer to http://blogs.msdn.com/webdevtools/archive/2007/03/08/jscript-debugging-in-visual-studio-2005.aspx

and http://blogs.msdn.com/rajeshbhutani/archive/2007/04/10/debugging-jscript-code-in-ie-using-vwd-express.aspx 

Hope this helps. 

<WebMethod()> _
Public Function getFunction(ByVal prefixText As String, ByVal count As Integer) As String()
Dim myList As New Generic.List(Of String)
For Each row As Data.DataRow In DataAccessFunction(prefixText)
    myList.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(String.Format("{0} {1}", city, zip), ID))
Next
Return brokers.ToArray()
End Function

You do not need to edit the javascript file.

Make sure you are using a recent version of the toolkit and populate your array similar to what is shown:

 For Each dr As DataRowView In dv
    sbrRecord = New StringBuilder

    strLastName = dr("LastName")
    sbrRecord.Append(strLastName)

    If Not IsDBNull(dr("FirstInitial")) Then
        sbrRecord.Append(", ")
        sbrRecord.Append(dr("FirstInitial"))
    End If

    // make sure to space out all columns evenly
    // make sure the first column is 25 characters
    While sbrRecord.ToString().Length < 25
        sbrRecord.Append(" ") '(Space(1).ToString())
    End While

    If Not IsDBNull(dr("PhoneNumber")) Then
        If Not IsDBNull(dr("PhoneType_ID")) Then
            If CInt(dr("PhoneType_ID")) = 3 Or CInt(dr("PhoneType_ID")) = 7 Then
                sbrRecord.Append(" Cell:")
                sbrRecord.Append(dr("PhoneNumber"))
            End If
        End If
    End If

    items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sbrRecord.ToString(), strLastName))
Next

The ACE list will show LastName, FirstName and then after 25 spaces, the phonenumber. You can add as many columns as you like.

The trick is to make sure the dropdown expands to show all data. To do this add OnClientShown event to your autocompleteextender:

<asp:TextBox ID="txtPhoneSearch" runat="server" Width="140" /> 
<div id="AutoComplete" runat="server" nowrap="nowrap" style="height:150;"></div>
<ajaxToolkit:AutoCompleteExtender 
	ID="myACE"  									
	BehaviorID="AutoCompleteEx"
	runat="server" 
        CompletionInterval="2"
	OnClientItemSelected="itemSelected" 
	TargetControlID="txtMyTextBox" 
	MinimumPrefixLength="1" 
	OnClientShown="itemShown"
	CompletionListElementID="AutoComplete"
... />

function itemShown(source, eventArgs) {
    $get("AutoComplete").style.width = 400;  
    // AutoComplete is the id of my div tag 
    // that is associated with the autocompleteextender
}

Change the width to suit your needs.

I use the itemSelected event to show either the text or the value from the list in the textbox:

 
function itemSelected(source, eventArgs) {
    $get("txtPhoneSearch").value = eventArgs.get_value();    
    // $get("txtPhoneSearch").value = eventArgs.get_text(); 

}
 

Finally, add a style to your list to give it a font that applies fixed width to its characters. 

I use courier new.

CompletionListCssClass="autocomplete_completionListElement"
 
 and your stylesheet contains:
 
.autocomplete_completionListElement 
{  
	visibility : hidden;
	margin : 0px!important;
	background-color : inherit;
	color : windowtext;
	border : buttonshadow;
	border-width : 1px;
	border-style : solid;
	cursor : 'default';
	overflow : auto;
	height : 200px;
    text-align : left; 
    list-style-type : none;
    font-family: courier new;
    font-size: 8pt;    
}
 

Tim