As of July 2017, users can select multiple items from a collection of objects in ASP.NET MVC with MultiAutoComplete. In the autocomplete control, selected items appear as tags in the text area of the control, and you can remove items from selection by clicking on the "X" in each tag. 
MultiAutoComplete
Data Binding
You can bind the control to a collection of strings or objects by setting the Bind property to the source collection:
@(Html.C1().MultiAutoComplete().Bind(Model).CssMatch("highlight")
.SelectedIndexes(1,3)
If you want to set some selections by default, use the SelectedIndexes property (see code above) to set the elements' indexes.
Binding Data to Complex Objects
MultiAutoComplete supports binding data to a collection of objects. Bind to the model as usual and set the DisplayMemberPath property to the object's property that's supposed to be displayed.
@(Html.C1().MultiAutoComplete()
.Bind(Model)
.DisplayMemberPath("Name")
.MaxSelectedItems(4))
Set the MaxSelectedItems property to limit the number of items that can be selected at one time.
Incremental Search
Incremental search — or real-time search — is a progressive search technique that MultiAutoComplete supports out-of-the-box. For example, if you need to display all types in an assembly — which is itself a huge list — it's best to use incremental search. Use ItemsSourceAction to set the controller action that filters on the server. For this example, use the following code to set up the controller action:
public ActionResult TypesInMscorlib(string query, int max)
{
var types = typeof(object).Assembly.GetTypes();
return this.C1Json(types
.Where(t => t.FullName.ToUpper().Contains(query.ToUpper()))
.Select(t => t.FullName)
.Take(max).ToList(),
behavior: JsonRequestBehavior.AllowGet);
}
In the view, set the ItemsSourceAction of the MultiAutoComplete control with the following code:
<br/> .highlight {<br/> background-color: #ff0;<br/> color: #000;<br/> }<br/>
@(Html.C1().MultiAutoComplete()
.MaxItems(10).CssMatch("highlight")
.ItemsSourceAction(Url.Action("TypesInMscorlib"))
)
Use the CSSMatch property to set the CSS class that gets applied to the matching search strings.
Important Client APIs
While working with MultiAutoComplete, you often need to work with the client APIs of the control. You can use the client API similarly to ASP.NET MVC's other controls (read about it here). The full client API is included in the documentation. The control's most important properties and events/methods are:
- the SelectedItems property
- Gets the selected items of the controls
- the SelectedItemChanged event
- Occurs when the value of the selectedItems property changes. Here's an example:
<script><br/>selectedItemsChanged(s, e) {<br/> var arr = s.selectedItems,<br/> html = '';<br/> for (var i = 0; i < arr.length; i++) {<br/> html += wijmo.format('<li>{country}</li>', arr[i]);<br/> }<br/> document.getElementById('selectedItems').innerHTML = html;<br/> }<br/> });<br/></script>
@(Html.C1().MultiAutoComplete()
.MaxItems(10).CssMatch("highlight")
.Bind(Model).OnClientSelectedItemsChanged("selectedItemsChanged")
)
**Selected Items:**
- onSelectedIndexChanged
- Raises the selectedIndexChanged event
Download the latest version of ComponentOne Studio
MESCIUS inc.