Nevron Open Vision Documentation
User Interface / Widgets / Text / Auto Complete Box
In This Topic
    Auto Complete Box
    In This Topic

    The auto complete box is a widget that is made of a text box and optionally an image box. When the user enters some text in the text box of the auto complete box a list box pops up with auto complete suggestions.

     Initialization

    After an auto complete box is created it should be initialized through its InitAutoComplete generic method, which accepts an iterable object (e.g. a list) and optionally an auto complete factory. The items in this iterable object will be used to fill the auto complete suggestions shown in the drop down list box when the user modifies the text of the auto complete box. The following code demonstrates how to create and initialize a simple auto complete box:

    Auto Complete Box Initialization
    Copy Code
    // Create a list of countries
    NList<string> countries = new NList<string>();
    countries.Add("Algeria");
    countries.Add("Belgium");
    countries.Add("Bulgaria");
    countries.Add("United Arab Emirates");
    countries.Add("United Kingdom");
    countries.Add("United States");
    
    // Create and initialize the auto complete box
    NAutoCompleteBox autoCompleteBox = new NAutoCompleteBox();
    autoCompleteBox.PreferredWidth = 150;
    autoCompleteBox.InitAutoComplete(countries);
    

    After the code is executed the auto complete box will be initialized with the given list of countries, so when you enter "un" for example, the drop down list box will show 3 items - "United Arab Emirates", "United Kingdom" and "United States".

     Properties and Events

    The auto complete box provides the following properties:

    • Text - gets/sets the current text of the auto complete box. It is automatically updated when the user clicks on an item of the drop down list box or navigated to an item with the keyboard arrow keys and pressed "Enter".
    • Image - gets/sets the image of the auto complete box. It is by default shown to the right of the text box. The image is by default set to null, which means that the aut complete box consists only of a text box.
    • CaseSensitive - determines whether the auto complete text box suggestions should use case sensitive or case insensitive string matching.
    • StringMatchMode - the string match mode that should be used together with the value of the Text property to determine the currently visible items in the drop down list box. Can be one of the following:
      Value Description
      StartsWith Matches all strings that start with a given substring. This is the default value.
      WordStartsWith Matches all strings that contain a word starting with a given substring.
      MultiWordStartsWithCount Matches all strings that contain a word starting with one of the words of a given substring and orders the matched strings by the number of matched words.
      Contains Matches all strings that contain a given substring.
      EndsWith Matches all strings that end with a given substring.
      WordEndsWith Matches all strings that contains a word ending with a given substring.

    The auto complete box also provides the following events:

    • TextChanged - occurs when the text of the auto complete box has changed.
    • ListBoxItemSelected - occurs when the user has selected an item in the drop down list box either by clicking it or by pressing enter when it is highlighted. You can subscribe to this event after the auto complete box has been initialized through the InitAutoComplete method. The following piece of code demonstrates how to handle the ListBoxItemSelected event of the auto complete box:
    ListBoxItemSelected Event Handling
    Copy Code
    private void OnAutoCompleteBoxListBoxItemSelected(NEventArgs arg)
    {
        INSearchableListBox listBox = (INSearchableListBox)arg.TargetNode;
        object selectedItem = listBox.GetSelectedItem();    
        // Implement your logic depending on the selected item here
    }
    
     Widget Factory

    Nevron Open Vision auto complete box lets you fully customize the text and appearance of the drop down list box items. All you have to do is to create a class that inherits NWidgetFactory and pass an instance of it to the InitAutoComplete method of the auto complete box. You can override the following methods of the auto complete factory in order to customize the drop down list box items:

    • GetString - gets the string representation of the given data source item. The default implementation calls the ToString method of the given data source item.
    • GetTag - gets the tag to apply to the created item.
    • CreateWidget - creates a widget for the given data source item. The default implementation creates a label and sets its text to the result of the GetString method for the given data source item.
    See Also