Homepage image
Sample of the Day RSS Feed

Sample Downloads: http://code.msdn.microsoft.com/ASPNETKeepAutoCompleteListO-54e16b32 

Today’s sample demonstrates how to keep AutoComplete List Open, and select multiple options. This feature can be used in many scenarios. Such as when user wants to select multiple products based on fuzzy search.

The sample was written by our star sample writer: Arwind Gao.

imageYou can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage http://1code.codeplex.com/.

 

Introduction

This project demonstrates how to keep AutoComplete List Open, and select multiple options. This feature can be used in many scenarios. Such as when user wants to select multiple products based on fuzzy search.

 

Running the Sample

Please follow these demonstration steps below.

Step 1: Open the VBASPNETKeepAutoCompleteListOpen.sln. Expand the VBASPNETKeepAutoCompleteListOpen web application and press Ctrl + F5 to show the Default.aspx.

[Note] You may need to install the AjaxControlToolkit, You can download it here: http://ajaxcontroltoolkit.codeplex.com/

image

Step 2: Enter part or complete name of the movie.

image

Select some options.

image

 

Step 3: Click “Close the Popup” or “Reset the ListBox”.

image

 

Using the Code

Step 1. Create a VB.NET "ASP.NET Empty Web Application" in Visual Studio 2010/Visual Web Developer 2010. Name it as “VBASPNETKeepAutoCompleteListOpen".

Step 2.  Add a WebService and rename it to ��AutoComplete��. This WebService is used to search for movies under the conditions. Move code file to the App_Code folder.

<%@ WebService Language="VB" CodeBehind="~/App_Code/AutoComplete.vb" Class="AutoComplete" %> 

The code of the WebService as shown below

<System.Web.Script.Services.ScriptService()> _ 
Public Class AutoComplete 
    Inherits System.Web.Services.WebService 
 
 
    Private _movies As New List(Of String)() 
 
 
    Public Sub New() 
        _movies.Add("a1") 
        _movies.Add("a2") 
        _movies.Add("b1") 
        _movies.Add("China") 
        _movies.Add("c21") 
        _movies.Add("Dr. Seuss' The Lorax ") 
        _movies.Add("Dear Channing Tatum, We Heart You. ") 
        _movies.Add("Dream") 
        _movies.Add("Empty") 
        _movies.Add("Egg") 
        _movies.Add("Flower") 
        _movies.Add("Floor") 
        _movies.Add("Great") 
        _movies.Add("g") 
        _movies.Add("h1") 
        _movies.Add("h2") 
        _movies.Add("i1") 
        _movies.Add("jeep") 
        _movies.Add("k") 
        _movies.Add("Loop") 
        _movies.Add("Man") 
        _movies.Add("Nice") 
        _movies.Add("O1") 
        _movies.Add("Pear") 
        _movies.Add("Queen") 
        _movies.Add("Rest") 
        _movies.Add("Super Man") 
        _movies.Add("Safe House ") 
        _movies.Add("This Means War ") 
        _movies.Add("The Secret World of Arrietty ") 
        _movies.Add("US") 
        _movies.Add("UK") 
        _movies.Add("V") 
        _movies.Add("W") 
        _movies.Add("X") 
        _movies.Add("Y") 
        _movies.Add("Z") 
    End Sub 
 
 
    <WebMethod()> _ 
    Public Function GetMovies(ByVal prefixText As String, ByVal count As Integer) As String() 
        If count = 0 Then 
            count = 10 
        End If 
 
 
        Dim matches = (From m In _movies Where (m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)) Select m).Take(count) 
        Return matches.ToArray() 
    End Function 
End Class 
 

Step 3.  Add an AutoCompleteExtender Control, a TextBox Control and a ListBox control in the Default.aspx.

<AjaxControlToolkit:ToolkitScriptManager CombineScripts="false" runat="server" EnablePartialRendering="true"> 
</AjaxControlToolkit:ToolkitScriptManager> 
 
    Personal information settings You can search favorite movies, and then you may select multiple items. MovieName: <asp:TextBox ID="tbMovies" runat="server" Text=''></asp:TextBox> <input type="button" name="close" value="Close the Popup" onclick="hideOptionList();" /> <AjaxControlToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" BehaviorID="ACE" runat="server" TargetControlID="tbMovies" ServicePath="AutoComplete.asmx" ServiceMethod="GetMovies" MinimumPrefixLength="1" CompletionInterval="10" CompletionSetCount="10" EnableCaching="true" /> <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox> <input type="button" name="reset" value="Reset the ListBox" onclick="resetListBox();" />  
 
<script src="AutoComplete.js" type="text/javascript"></script> 

 

Step 4. Write the JavaScript file for the feature.

function hideOptionList() { 
    $find('ACE').hidePopup(); 
    $get('tbMovies').value = ""; 
} 
 
 
function resetListBox() { 
    var list = $get("ListBox1"); 
    list.options.length = 0; 
} 
 
 
// These two functions are copied from the original design code of the AutoCompleteBehavior. 
// We modify them to insert the selected value and keep the CompletionList shown. 
 
 
// Note that we need to place the script tag under the ScriptManager and the AutoCompleteExtender 
// to ensure we can use the AjaxControlToolkit namespace. 
 
 
Sys.Extended.UI.AutoCompleteBehavior.prototype._setText = function(item) { 
    // Rewrite the _setText function to insert the newText into the ListBox. 
    var text = (item && item.firstChild) ? item.firstChild.nodeValue : null; 
    this._timer.set_enabled(false); 
 
 
    var element = this.get_element(); 
    var control = element.control; 
 
 
    var newText = this._showOnlyCurrentWordInCompletionListItem ? this._getTextWithInsertedWord(text) : text; 
    if (control && control.set_text) { 
        control.set_text(newText); 
    } else { 
        element.value = newText; 
    } 
 
 
    //********Add the selection into the ListBox1********// 
    var list = $get("ListBox1"); 
    list.options.add(new Option(newText, newText)); 
    //********End****************************************// 
 
 
    $common.tryFireEvent(element, "change"); 
 
 
    this.raiseItemSelected(new Sys.Extended.UI.AutoCompleteItemEventArgs(item, text, item ? item._value : null)); 
 
 
    this._currentPrefix = this._currentCompletionWord(); 
    this._hideCompletionList(); 
}; 
Sys.Extended.UI.AutoCompleteBehavior.prototype._hideCompletionList = function() { 
    // Rewrite the _hideCompletionList function to keep the list shown all the time 
    var eventArgs = new Sys.CancelEventArgs(); 
    this.raiseHiding(eventArgs); 
    if (eventArgs.get_cancel()) { 
        return; 
    } 
    // The hidePopup function is to close the CompletionList, so we need to 
    // comment this line to ensure the CompletionList is visible. 
    // this.hidePopup(); 
};   

 

More Information

AjaxControlToolkitSampleSite