@model IEnumerable<Gdp>

    <h1>
        MultiAutoComplete
    </h1>

    <p>
        The MultiAutoComplete control is similar to the MultiSelect.
        Both controls allow users to select multiple items from lists.
        The main differences between the two are:
    </p>
    <ul>
        <li>
            The MultiAutoComplete shows a drop-down that includes only
            items that match the current input (like the AutoComplete).
        </li>
        <li>
            The MultiAutoComplete shows all the items that are currently
            selected, and allows users to remove items by clicking them on
            the list.
        </li>
        <li>
            The MultiAutoComplete exposes the list of selected items through
            the <b>selectedItems</b> property (the MultiSelect uses
            <b>checkedItems</b> instead).
        </li>
    </ul>
    <p>
        For example, try typing "land" or "uni":
    </p>
    <div class="row demo-settings">
        <div class="col-xs-6">
            @(Html.C1().MultiAutoComplete<Gdp>().Id("theMultiAutoComplete")
                .Bind(Model).DisplayMemberPath("Country")
                .Placeholder("Select some countries")
                .SelectedIndex(-1) //start empty
            )
        </div>
        <div class="col-xs-6">
            <p>
                <b>Selected Items:</b>
            </p>
            <ul id="selectedItems"></ul>
        </div>
    </div>