AutoComplete for ASP.NET Web Forms
Step 2 of 3: Customize the Search Box
Quick Start > Step 2 of 3: Customize the Search Box

In this step you'll change the appearance and behavior of the search box you created in the last step. Complete the following steps to customize your AutoComplete for ASP.NET Web Forms search box:

  1. Select the C1AutoComplete smart tag to open the C1AutoComplete Tasks menu and set the following:
    • Enter 300px in the Width textbox
    • Enter 50px in the Height textbox
    • Select midnight in the Theme drop-down box to change the appearance of the AutoComplete control.
  2. Click Add AutoCompleteItem to open the C1AutoComplete DesignerForm. Use the Add ChildItems button to add 13 ChildItems to the C1AutoComplete control.
  3. Click the first ChildItem in the list, C1AutoCompleteItem1, and locate the label and value properties. Enter c++ for both properties. Enter the text from the following table in the label and value textboxes for the remaining C1AutoCompleteItems:

    C1AutoCompleteDataItem Label Value
    C1AutoCompleteItem2 java java
    C1AutoCompleteItem3 php php
    C1AutoCompleteItem4 coldfusion coldfusion
    C1AutoCompelteItem5 javascript javascript
    C1AutoCompleteItem6 asp asp
    C1AutoCompleteItem7 ruby ruby
    C1AutoCompleteItem8 python python
    C1AutoCompleteItem9 c c
    C1AutoCompleteItem10 scala scala
    C1AutoCompleteItem11 groovy groovy
    C1AutoCompleteItem12 haskell haskell
    C1AutoCompleteItem13 perl perl

    Click OK when you have finished entering the above values. These C1AutoCompleteItems are the items which will complete a user's search.

  4. Click the C1AutoComplete control to view the properties in the Properties window. Locate the MinCount property and change the value from 1 to 2.

You've completed step two of the AutoComplete for ASP.NET Web Forms quick start guide. In the next step you'll run the project.