Skip to content

AutoCompleteExtender

MikhailTymchukDX edited this page Apr 12, 2017 · 3 revisions

Demo Page

AutoComplete extends any ASP.NET TextBox control. It associates that control with a popup panel to display words that begin with the prefix that is entered into the text box.

Properties

Name Description
CompletionInterval Time in milliseconds when the timer will kick in to get suggestions using the web service. The default is 1000
CompletionListCssClass A CSS class that will be used to style the completion list flyout.
CompletionListElementID ID of an element that will serve as the completion list.
Remarks: Deprecated. Use the default flyout and style that using the CssClass properties.
CompletionListHighlightedItemCssClass A CSS class that will be used to style a highlighted item in the autocomplete list.
CompletionListItemCssClass A CSS class that will be used to style an item in the autocomplete list.
CompletionSetCount A number of suggestions to be provided. The default is 10
ContextKey User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type.
DelimiterCharacters The character(s) used to separate words for autocomplete
EnableCaching A flag to denote whether client-side caching is enabled. The default is true.
FirstRowSelected Determines if the first row of the Search Results is selected by default. The default is false.
MinimumPrefixLength Minimum length of text before the webservice provides suggestions. The default is 3
OnClientHidden A handler attached to the client-side hidden event
OnClientHiding A handler attached to the client-side hiding event
OnClientItemOut A handler attached to the client-side itemOut event
OnClientItemOver A handler attached to the client-side itemOver event
OnClientItemSelected A handler attached to the client-side itemSelected event
OnClientPopulated A handler attached to the client-side populated event
OnClientPopulating A handler attached to the client-side populating event
OnClientShowing A handler attached to the client-side showing event
OnClientShown A handler attached to the client-side shown event
OnHide OnHide animation
OnShow OnShow animation
ServiceMethod The web service method to be called
ServicePath The path to the web service that the extender will pull the word/sentence completions from. If this is not provided, the service method should be a page method.
ShowOnlyCurrentWordInCompletionListItem If delimiter characters are specified and ShowOnlyCurrentWordInCompletionListItem is set to true, then the completion list displays suggestions just for the current word, otherwise, it displays the whole string that will show up in the TextBox if that item is selected, which is the current default. The default is false.
UseContextKey Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type.

Methods

Name Description
CreateAutoCompleteItem(text, value) Creates a serialized JSON object representing a text/value pair that can be returned by the webservice

Client properties

Name Description
completionInterval Auto completion timer interval in milliseconds. The default is 1000
completionList List dom element
completionListCssClass A CSS class name that will be used to style the completion list element.
completionListElementID ID of the completion div element
completionListItemCssClass A CSS class name that will be used to style an item in the completion list.
completionSetCount Maximum completion set size. The default is 10
contextKey User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type.
delimiterCharacters The character(s) used to seperate words for autocomplete
enableCaching Whether suggestions retrieved from the webservice should be cached
firstRowSelected A flag to determine if the first option in the flyout is selected or not. The default is false
get_onHide Generic OnHide Animation's JSON definition
highlightedItemCssClass A CSS class name that will be used to style a highlighted item in the list.
isMultiWord Whether the behavior is currently in multi-word mode
minimumPrefixLength Minimum text prefix length required to call the webservice. The default is 3
onHideBehavior Generic OnHide Animation's behavior
onShow Generic OnShow Animation's JSON definition
onShowBehavior Generic OnShow Animation's behavior
serviceMethod Web service method
servicePath Web service url
showOnlyCurrentWordInCompletionListItem If Delimiter characters are specified and showOnlyCurrentWordInCompletionListItem is set to true, then the completion list displays suggestions just for the current word, otherwise, it displays the whole string that will show up in the TextBox if that item is selected, which is the current default. The default is false
useContextKey Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type. The default is false

Client methods

Name Description
hidePopup() Hides the completion list popup
onHide() Play the OnHide animation
onShow() Play the OnShow animation
showPopup() Shows the completion list popup

Client events

Name Description
hidden Occurs when a control is hidden.
hiding Occurs when a control is hiding.
itemOut Occurs when the mouse cursor is out of the item.
itemOver Occurs when the mouse cursor is over item.
itemSelected Occurs when an item is selected.
populated Occurs when a control is populated.
populating Occurs when a control is populating.
showing Occurs when a control is showing.
shown Occurs when a control is shown.

Client properties

completionInterval

Auto completion timer interval in milliseconds. The default is 1000

Getter name: get_completionInterval()
Setter name: set_completionInterval(value)

completionList

List dom element

Getter name: get_completionList()
Setter name: set_completionList(value)

completionListCssClass

A CSS class name that will be used to style the completion list element.

Getter name: get_completionListCssClass()
Setter name: set_completionListCssClass(value)

completionListElementID

ID of the completion div element

Getter name: get_completionListElementID()
Setter name: set_completionListElementID(value)

completionListItemCssClass

A CSS class name that will be used to style an item in the completion list.

Getter name: get_completionListItemCssClass()
Setter name: set_completionListItemCssClass(value)

completionSetCount

Maximum completion set size. The default is 10

Getter name: get_completionSetCount()
Setter name: set_completionSetCount(value)

contextKey

User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type.

Getter name: get_contextKey()
Setter name: set_contextKey(value)

delimiterCharacters

The character(s) used to seperate words for autocomplete

Getter name: get_delimiterCharacters()
Setter name: set_delimiterCharacters(value)

enableCaching

Whether suggestions retrieved from the webservice should be cached

Getter name: get_enableCaching()
Setter name: set_enableCaching(value)

firstRowSelected

A flag to determine if the first option in the flyout is selected or not. The default is false

Getter name: get_firstRowSelected()
Setter name: set_firstRowSelected(value)

get_onHide

Generic OnHide Animation's JSON definition

Getter name: get_onHide()
Setter name: set_onHide(value)

highlightedItemCssClass

A CSS class name that will be used to style a highlighted item in the list.

Getter name: get_highlightedItemCssClass()
Setter name: set_highlightedItemCssClass(value)

isMultiWord

Whether the behavior is currently in multi-word mode

Getter name: get_isMultiword()

minimumPrefixLength

Minimum text prefix length required to call the webservice. The default is 3

Getter name: get_minimumPrefixLength()
Setter name: set_minimumPrefixLength(value)

onHideBehavior

Generic OnHide Animation's behavior

Getter name: get_onHideBehavior()

onShow

Generic OnShow Animation's JSON definition

Getter name: get_onShow()
Setter name: set_onShow(value)

onShowBehavior

Generic OnShow Animation's behavior

Getter name: get_onShowBehavior()

serviceMethod

Web service method

Getter name: get_serviceMethod()
Setter name: set_serviceMethod(value)

servicePath

Web service url

Getter name: get_servicePath()
Setter name: set_servicePath(value)

showOnlyCurrentWordInCompletionListItem

If Delimiter characters are specified and showOnlyCurrentWordInCompletionListItem is set to true, then the completion list displays suggestions just for the current word, otherwise, it displays the whole string that will show up in the TextBox if that item is selected, which is the current default. The default is false

Getter name: get_showOnlyCurrentWordInCompletionListItem()
Setter name: set_showOnlyCurrentWordInCompletionListItem(value)

useContextKey

Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of a string type. The default is false

Getter name: get_useContextKey()
Setter name: set_useContextKey(value)

Methods

CreateAutoCompleteItem(text, value)

Creates a serialized JSON object representing a text/value pair that can be returned by the webservice

Params:

  • text

    • Type: String
    • Description: Text part
  • value

    • Type: String
    • Description: Value part

Client methods

hidePopup()

Hides the completion list popup

onHide()

Play the OnHide animation

onShow()

Play the OnShow animation

showPopup()

Shows the completion list popup

Client events

hidden

Occurs when a control is hidden.

Add event handler method: add_hidden(handler)
Remove event handler method: remove_hidden(handler)
Raise event method: raise_hidden()

hiding

Occurs when a control is hiding.

Add event handler method: add_hiding(handler)
Remove event handler method: remove_hiding(handler)
Raise event method: raise_hiding()

itemOut

Occurs when the mouse cursor is out of the item.

Add event handler method: add_itemOut(handler)
Remove event handler method: remove_itemOut(handler)
Raise event method: raise_itemOut()

itemOver

Occurs when the mouse cursor is over item.

Add event handler method: add_itemOver(handler)
Remove event handler method: remove_itemOver(handler)
Raise event method: raise_itemOver()

itemSelected

Occurs when an item is selected.

Add event handler method: add_itemSelected(handler)
Remove event handler method: remove_itemSelected(handler)
Raise event method: raise_itemSelected()

populated

Occurs when a control is populated.

Add event handler method: add_populated(handler)
Remove event handler method: remove_populated(handler)
Raise event method: raise_populated()

populating

Occurs when a control is populating.

Add event handler method: add_populating(handler)
Remove event handler method: remove_populating(handler)
Raise event method: raise_populating()

showing

Occurs when a control is showing.

Add event handler method: add_showing(handler)
Remove event handler method: remove_showing(handler)
Raise event method: raise_showing()

shown

Occurs when a control is shown.

Add event handler method: add_shown(handler)
Remove event handler method: remove_shown(handler)
Raise event method: raise_shown()

Clone this wiki locally