[Sample of Apr 28th] Keep ASP.NET AutoComplete List Open
 |
 |
|
 |
 |
|
Sample Downloads: https://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.
You 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 https://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: https://ajaxcontroltoolkit.codeplex.com/
Step 2: Enter part or complete name of the movie.
Select some options.
Step 3: Click “Close the Popup” or “Reset the ListBox”.
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();
};