I have reconfigure chosen plugin as below and working properly.
My razor :
<div style="width: 750px; clear: both; margin-left: 170px;">
@Html.ListBox(
"Emailaddress",
ViewBag.EmailaddressList as MultiSelectList,
new { @class = "chosen-select", data_placeholder = "Choose a Emailaddress...", style = "width:750px;", tabindex = "4" }
)
</div>
Add this script after your html Razor code
<script src="@Url.Content("~/Scripts/chosen.js/chosen.jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
My viewbag :
ViewBag.Skills = new MultiSelectList(EmailaddressList, "Id", "EmailId");