<div>
    <div class="copy">
        <h3>
            AutoComplete</h3>
        <p>
            The <a href="http://wijmo.com/5/docs/topic/wijmo.input.AutoComplete.Class.html"
            target="_blank">AutoComplete</a> control derives from the <a 
            href="http://wijmo.com/5/docs/topic/wijmo.input.ComboBox.Class.html" target="_blank">
            ComboBox</a> and modifies it as follows:</p>
        <table style="width:80%">
            <tr><th>ComboBox</th><th>AutoComplete</th></tr>
            <tr style="vertical-align:text-top">
                <td style="padding-top:1em">Has a static look up list.</td>
                <td style="padding-top:1em">Filters the list dynamically as the user types. Also 
                allows you to provide the items dynamically.</td></tr>
            <tr style="vertical-align:text-top">
                <td style="padding-top:1em">Has a fixed look-up algorithm, that is, it always looks 
                for items that <i>start</i> with the string typed by the user.</td> 
                <td style="padding-top:1em">Looks for items that <i>contain</i> the string typed by 
                the user.</td></tr>
            <tr style="vertical-align:text-top">
                <td style="padding-top:1em">Displays items as plain text.</td> 
                <td style="padding-top:1em">Displays items as HTML, allowing it to highlight the 
                matching portions of the items containing matches.</td></tr>
        </table>
        <br />
        <p>These samples use the <a href="http://wijmo.com/5/docs/topic/wijmo.angular.WjAutoComplete.Class.html" 
            target="_blank">WjAutoComplete</a> directive and AngularJS.</p>
    </div>
    <h4>
        AutoComplete with string arrays</h4>
    <p>
        The AutoComplete control below uses a string array as its <b>itemsSource</b>. As you
        type, the drop-down shows a list of items from the array that contain the text you 
        typed. Notice that you can type multiple search terms. For example, 'un st' matches
        'United States.'</p>

    <wj-auto-complete
        control="ctx.ac1"
        items-source="ctx.countries"
        placeholder="country">
    </wj-auto-complete>
    <p>
        Selected Index: <b>{{ctx.ac1.selectedIndex}}</b><br />
        Selected Item: <b>{{ctx.ac1.selectedItem}}</b>
    </p>

    <br />
    <h4>
        AutoComplete with CollectionViews</h4>
    <p>
        The AutoComplete control below uses a <a 
        href="http://wijmo.com/5/docs/topic/wijmo.collections.CollectionView.Class.html" 
        target="_blank">CollectionView</a> as its <b>itemsSource</b>, and 'country' 
        as its <b>displayMemberPath</b>. The main difference between this example and
        the previous is that in this case each item is a full object, whereas in
        the previous example it was just a string.</p>
    <p>
        Note that the AutoComplete applies a filter to the collection view as you type,
        so if other controls are bound to the same collection view, they also show the
        filtered data. If you want to avoid this, create a separate collection view for
        the AutoComplete.</p>

    <wj-auto-complete
        class="customEdit"
        control="ctx.ac2"
        items-source="ctx.items"
        display-member-path="country"
        placeholder="country">
    </wj-auto-complete>
    <p>
        Selected Index: <b>{{ctx.ac2.selectedIndex}}</b><br />
        Selected Item: <b>{{ctx.ac2.selectedItem}}</b>
    </p>

    <br />
    <h4>
        AutoComplete with custom data sources and highlighting</h4>
    <p>
        This AutoComplete does not have a static list of items. Instead, it uses the
        <b>itemsSourceFunction</b> property to specify a function that makes an Ajax call
        and returns items asynchronously. In this case, the items contain company data from
        a catalog with over 6,000 items. Real applications could use SQL queries to look
        up items from tables with millions of items.</p>
    <p>
        This AutoComplete also uses the <b>cssMatch</b> property to highlight the
        matches with a yellow background instead of using the default bold.</p>

    <wj-auto-complete
        class="customEdit"
        control="ctx.acAsync"
        items-source-function="ctx.getCompanies"
        display-member-path="SymbolName"
        selected-value-path="Symbol"
        placeholder="company name"
        css-match="match">
    </wj-auto-complete>
    <p>
        Selected Index: <b>{{ctx.acAsync.selectedIndex}}</b><br />
        Selected Item: <b>{{ctx.acAsync.selectedItem}}</b><br />
        Selected Value: <b>{{ctx.acAsync.selectedValue}}</b>
    </p>
</div>
