Techie Brains

jquery autocomplete multi select in mvc razor

In this blog am going to explain you how to implement multi select auto complete with jquery MVC  razor framework
in order to do that we need to download the jquery autocomplete fro the this link download jquery autocomplete

IN CSHTML:
In the cshtml file you need to write


  <div class="editor-label">
            @Html.LabelFor(model => model.yourModelID)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.yourModelID)
            @Html.ValidationMessageFor(model => model.yourModelID)
        </div>


<script type="text/javascript">
    $(document).ready(function () {


  $("#yourModelID").autocomplete('/yourcontroller/LookupTags',
      {
          dataType: 'json',
          parse: function (data) {
              var rows = new Array();
              for (var i = 0; i < data.length; i++) {
                  rows[i] = { data: data[i], value: data[i].Tag, result: data[i].Tag };
              }
              return rows;
          },
          formatItem: function (row, i, max) {
              return row.Tag;
          },
          width: 300,
          highlight: false,
          multiple: true,
          multipleSeparator: ","
      });


 });

</script>

In the controller:

  public ActionResult LookupTags(string q, int limit)
       {
           
  
          List<string> tags = //your list of strings you want to dispaly as autocomplte

              var retValue = tags
              .Where(x => x.StartsWith(q))
              .OrderBy(x => x)
              .Take(limit)
              .Select(r => new { Tag = r });
   
          // Return the result set as JSON
          return Json(retValue,JsonRequestBehavior.AllowGet);
       }

with this we can get autocomplete with multiselection 
I hope this will help you