Getting Started With Auto Complete Box in WP8

Introduction

This article explains the "auto complete box" control of the Windows Phone toolkit. The auto complete box is a combination of two controls, One is used for input and that is a text box, the second one is used for selecting the item and that is similar to a list box. In this article I'll cover the basics of the "auto complete box" control. After reading this article you will be familiar with the "auto complete box" control and how to add it to your app or an existing project. Let's start with the description of this control.

Auto Complete Box Control

As the name indicates, it's a control that provides an auto text completion capability to user on the basis of predefined collections. This control is a combination of text box and list box. The text box is where the user types the text and the list box works as a container of items that can be selected for completing the text box value. The list box contains the items that are filtered on the basis of input. The list box is known as a drop down since it opens only when there is an item to select.

Some of the properties of the Auto Complete Box that I have used in this demo are as follows:

• Text
  
  This property is used for setting the default text in a text box of the auto complete box.
  
• Filter Mode
  
  A very important and useful one. It allows you to set the type of filtering you want on collections. Some of the filters are like contains, contains case sensitive, equal and so on.
  

Apart from the preceding properties the following two events are also used.

1. Selection changed
   
   This event is fired when the item selected in the drop down is changed.
   
2. Got Focus
   
   This event is fired when the text box gets the focus.

Before you can run the following demo you need to install a Windows Phone 8 toolkit in your project. It's very easy to do this.

Installing Windows Phone 8 Toolkit

Use the following procedure to install the Windows Phone 8 toolkit using Nugget.

The following demo demonstrate the basic code required for adding the auto complete box in any project. The code is very simple to follow and works in the following steps:

• Add the auto complete box control to your design file.
  
• Provide whatever name you want to the control. This name will be used from the code behind for referring and controlling its behavior.
  
• Now move to the code behind. In the page constructor we have the "startDemo" function that basically initiates the demo.
  
• Inside the start demo we have the "createRandomItemSource" function that prepares a collection of randomly generated strings. These strings serve the purpose of an auto completion source for the auto completion box control.
  
• The Selection change event is used for fetching the selected item.
  
• The Search text is text being typed by the user in the text box and it is retrieved by the Search text property.

Let's see how to code it.

XAML