MultiAutoComplete

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:

The MultiAutoComplete shows a drop-down that includes only items that match the current input (like the AutoComplete).
The MultiAutoComplete shows all the items that are currently selected, and allows users to remove items by clicking them on the list.
The MultiAutoComplete exposes the list of selected items through the selectedItems property (the MultiSelect uses checkedItems instead).

For example, try typing "land" or "uni":

Selected Items:

// This file locates: "Scripts/Lesson/C1Input/MultiAutoComplete.js".
c1.documentReady(function () {
    var theMultiAutoComplete = wijmo.Control.getControl('#theMultiAutoComplete');
    theMultiAutoComplete.selectedItemsChanged.addHandler(function (s, e) {
        var arr = s.selectedItems,
          html = '';
        for (var i = 0; i < arr.length; i++) {
            html += wijmo.format('<li>{Country}</li>', arr[i]);
        }
        document.getElementById('selectedItems').innerHTML = html;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: MultiAutoComplete
        public ActionResult MultiAutoComplete()
        {
            return View(Models.Gdp.GetData());
        }
    }
}

@model IEnumerable<Gdp>
 
    <h1>
        @Html.Raw(Resources.C1Input.MultiAutoComplete_Title)
    </h1>
 
    <p>
        @Html.Raw(Resources.C1Input.MultiAutoComplete_Text1)
    </p>
    <ul>
        <li>
            @Html.Raw(Resources.C1Input.MultiAutoComplete_Text2)
        </li>
        <li>
            @Html.Raw(Resources.C1Input.MultiAutoComplete_Text3)
        </li>
        <li>
            @Html.Raw(Resources.C1Input.MultiAutoComplete_Text4)
        </li>
    </ul>
    <p>
        @Html.Raw(Resources.C1Input.MultiAutoComplete_Text5)
    </p>
    <div class="row demo-settings">
        <div class="col-xs-6">
            @(Html.C1().MultiAutoComplete<Gdp>().Id("theMultiAutoComplete")
                .Bind(Model).DisplayMemberPath("Country")
                .Placeholder(Resources.C1Input.MultiAutoComplete_Text6)
                .SelectedIndex(-1) //start empty
            )
        </div>
        <div class="col-xs-6">
            <p>
                @Html.Raw(Resources.C1Input.MultiAutoComplete_Text7)
            </p>
            <ul id="selectedItems"></ul>
        </div>
    </div>