AutoComplete Extender (demo)

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.
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

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 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)

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()

Last edited Sep 14, 2015 at 9:56 AM by fadilmamedov, version 1