title: JQGrid Multiselect filter-not able to filter multiple options
body: <p>Sorry to bother you again. 
  I am facing very critical issue with JQGrid Multiselect filter. When ever I am selecting multiple filter options for a particular column, its returning empty result. See below screenshots. And also I am attaching codes.
  In the example if I select "SPM" or "T-CRM" individually for "COE" column as search filter then its giving results but if I select both "SPM" and "T-CRM" then its not returning any value.</p>
  
  <p>*Previously it was working as expected but from that day when I have added JQGrid MultiSelect filter option value populate based on column's distinct <a href="https://stackoverflow.com/questions/26972112/jqgrid-multiselect-filter-option-populate-based-on-columns-distinct-value/">value</a>, its not working.</p>
  
  <p>Please help me to overcome from this issue.</p>
  
  <p><img src="https://i.stack.imgur.com/q9ia1.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/doItv.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/EqMWS.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/ZNBZw.png" alt="enter image description here"></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          createSelectList = function (data) {
              selectValue = jQuery.parseJSON(data);
              var s = '&lt;select&gt;';
              if (selectValue &amp;&amp; selectValue.length) {
                  for (var i = 0, l = selectValue.length; i &lt; l; i++) {
                      s += '&lt;option value="' + selectValue[i].Key + '"&gt;' + selectValue[i].Value + '&lt;/option&gt;';
                  }
              }
              return s + "&lt;/select&gt;";
          }
          getUniqueNames = function (columnName, grid) {
  
              var mydata = grid.jqGrid("getGridParam", "data");
              var texts, uniqueTexts = [], textsLength, text, textsMap = {}, i;
              switch (columnName) {
                  case "AccountName":
                      texts = $.map(mydata, function (item) { return item.AccountName; });
                      textsLength = texts.length;
                      break;
                  case "OpportunityName":
                      texts = $.map(mydata, function (item) { return item.OpportunityName; });
                      textsLength = texts.length;
                      break;
                  case "Account":
                      texts = $.map(mydata, function (item) { return item.Account; });
                      textsLength = texts.length;
                      break;
                  case "COE":
                      texts = $.map(mydata, function (item) { return item.COE; });
                      textsLength = texts.length;
                      break;
                  case "DemandType":
                      texts = $.map(mydata, function (item) { return item.DemandType; });
                      textsLength = texts.length;
                      break;
                  case "Location":
                      texts = $.map(mydata, function (item) { return item.Location; });
                      textsLength = texts.length;
                      break;
                  case "Designation":
                      texts = $.map(mydata, function (item) { return item.Designation; });
                      textsLength = texts.length;
                      break;
                  case "Experience":
                      texts = $.map(mydata, function (item) { return item.Experience; });
                      textsLength = texts.length;
                      break;
                  case "ExpectedRole":
                      texts = $.map(mydata, function (item) { return item.ExpectedRole; });
                      textsLength = texts.length;
                      break;
                  case "SkillCategory":
                      texts = $.map(mydata, function (item) { return item.SkillCategory; });
                      textsLength = texts.length;
                      break;
                  case "PrimarySkill":
                      texts = $.map(mydata, function (item) { return item.PrimarySkill; });
                      textsLength = texts.length;
                      break;
                  case "SecondarySkill":
                      texts = $.map(mydata, function (item) { return item.SecondarySkill; });
                      textsLength = texts.length;
                      break;
                  case "OtherSkill":
                      texts = $.map(mydata, function (item) { return item.OtherSkill; });
                      textsLength = texts.length;
                      break;
                  case "RequiredDate":
                      texts = $.map(mydata, function (item) { return item.RequiredDate; });
                      textsLength = texts.length;
                      break;
                  case "EndDate":
                      texts = $.map(mydata, function (item) { return item.EndDate; });
                      textsLength = texts.length;
                      break;
                  case "CriticalFlag":
                      texts = $.map(mydata, function (item) { return item.CriticalFlag; });
                      textsLength = texts.length;
                      break;
                  case "HiringSO":
                      texts = $.map(mydata, function (item) { return item.HiringSO; });
                      textsLength = texts.length;
                      break;
                  case "HiringSOId":
                      texts = $.map(mydata, function (item) { return item.HiringSOId; });
                      textsLength = texts.length;
                      break;
                  case "ConfidenceFactor":
                      texts = $.map(mydata, function (item) { return item.ConfidenceFactor; });
                      textsLength = texts.length;
                      break;
                  case "AccountPOC":
                      texts = $.map(mydata, function (item) { return item.AccountPOC; });
                      textsLength = texts.length;
                      break;
                  case "Type":
                      texts = $.map(mydata, function (item) { return item.Type; });
                      textsLength = texts.length;
                      break;
                  case "EmpName":
                      texts = $.map(mydata, function (item) { return item.EmpName; });
                      textsLength = texts.length;
                      break;
                  case "AvailabilityDate":
                      texts = $.map(mydata, function (item) { return item.AvailabilityDate; });
                      textsLength = texts.length;
                      break;
                  case "CurrentRole":
                      texts = $.map(mydata, function (item) { return item.CurrentRole; });
                      textsLength = texts.length;
                      break;
                  case "VisaStatus":
                      texts = $.map(mydata, function (item) { return item.VisaStatus; });
                      textsLength = texts.length;
                      break;
                  case "Country":
                      texts = $.map(mydata, function (item) { return item.Country; });
                      textsLength = texts.length;
                      break;
                  case "ProbablePercentage":
                      texts = $.map(mydata, function (item) { return item.ProbablePercentage; });
                      textsLength = texts.length;
                      break;
                  //Assignment  
                  case "AssignmentId":
                      texts = $.map(mydata, function (item) { return item.AssignmentId; });
                      textsLength = texts.length;
                      break;
                  case "SupplyId":
                      texts = $.map(mydata, function (item) { return item.SupplyId; });
                      textsLength = texts.length;
                      break;
                  case "DemandId":
                      texts = $.map(mydata, function (item) { return item.DemandId; });
                      textsLength = texts.length;
                      break;
                  case "Status":
                      texts = $.map(mydata, function (item) { return item.Status; });
                      textsLength = texts.length;
                      break;
                  case "ApproverId":
                      texts = $.map(mydata, function (item) { return item.ApproverId; });
                      textsLength = texts.length;
                      break;
                  case "ApprovalDate":
                      texts = $.map(mydata, function (item) { return item.ApprovalDate; });
                      textsLength = texts.length;
                      break;
                  case "CreatedBy":
                      texts = $.map(mydata, function (item) { return item.CreatedBy; });
                      textsLength = texts.length;
                      break;
                  case "CreatedDate":
                      texts = $.map(mydata, function (item) { return item.CreatedDate; });
                      textsLength = texts.length;
                      break;
                  case "Comments":
                      texts = $.map(mydata, function (item) { return item.Comments; });
                      textsLength = texts.length;
                      break;
  
                  case "EmpId":
                      texts = $.map(mydata, function (item) { return item.EmpId; });
                      textsLength = texts.length;
                      break;
                  case "AvailabilityMonth":
                      texts = $.map(mydata, function (item) { return item.AvailabilityMonth; });
                      textsLength = texts.length;
                      break;
              }
  
              // var texts = grid.jqGrid('getCol', columnName), uniqueTexts = [],
              // textsLength = texts.length, text, textsMap = {}, i;
  
              for (i = 0; i &lt; textsLength; i++) {
                  text = texts[i];
                  if (text !== undefined &amp;&amp; textsMap[text] === undefined) {
                      // to test whether the texts is unique we place it in the map.
                      textsMap[text] = true;
                      uniqueTexts.push(text);
                  }
              }
              return uniqueTexts.sort();
          }
          buildSearchSelect = function (uniqueNames) {
              var values = "";
              $.each(uniqueNames, function () {
                  values += this + ":" + this + ";";
              });
              return values.substring(0, values.length - 1);
          }
          setSearchSelect = function (columnName, grid) {
              grid.jqGrid('setColProp', columnName,
                          {
                              searchoptions: {
                                  clearSearch: false,
                                  sopt: ['eq', 'ne'],
                                  value: buildSearchSelect(getUniqueNames(columnName, grid)),
                                  attr: { multiple: 'multiple', size: 3 },
                                  dataInit: dataInitMultiselect
                              }
                          }
              );
          }
          function loadCompleteHandler() {
              initializeGridFilterValueDem();
          }
          initializeGridFilterValueDem = function () {
  
              setSearchSelect("DemandId", jQuery("#listTable"));
              setSearchSelect("AccountName", jQuery("#listTable"));
              setSearchSelect("AccountPOC", jQuery("#listTable"));
              setSearchSelect("COE", jQuery("#listTable"));
              setSearchSelect("DemandType", jQuery("#listTable"));
              setSearchSelect("Location", jQuery("#listTable"));
              setSearchSelect("OpportunityName", jQuery("#listTable"));
              setSearchSelect("Designation", jQuery("#listTable"));
              setSearchSelect("Experience", jQuery("#listTable"));
              setSearchSelect("ExpectedRole", jQuery("#listTable"));
              setSearchSelect("SkillCategory", jQuery("#listTable"));
              setSearchSelect("PrimarySkill", jQuery("#listTable"));
              setSearchSelect("SecondarySkill", jQuery("#listTable"));
              setSearchSelect("OtherSkill", jQuery("#listTable"));
              setSearchSelect("RequiredDate", jQuery("#listTable"));
              setSearchSelect("EndDate", jQuery("#listTable"));
              setSearchSelect("ProbablePercentage", jQuery("#listTable"));
              setSearchSelect("CriticalFlag", jQuery("#listTable"));
              setSearchSelect("ConfidenceFactor", jQuery("#listTable"));
              setSearchSelect("HiringSO", jQuery("#listTable"));
              setSearchSelect("HiringSOId", jQuery("#listTable"));
  
              jQuery("#listTable").jqGrid("filterToolbar", {
                  stringResult: true,
                  searchOnEnter: true,
                  defaultSearch: myDefaultSearch,
                  beforeClear: function () {
                      $(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input&gt;select[multiple] option").each(function () {
                          this.selected = false; // unselect all options
                      });
  
                      $(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
                          $(this).prev("select[multiple]").multiselect("refresh");
                      }).css({
                          width: "98%",
                          marginTop: "1px",
                          marginBottom: "1px",
                          paddingTop: "3px"
                      });
                  }
              });
              jQuery("#listTable").jqGrid('setGridHeight', 300);
          }
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              jQuery(function () {
                  $grid = $("#listTable"),
                      myDefaultSearch = "cn",
                      getColumnIndexByName = function (columnName) {
                          var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                          for (i = 0; i &lt; l; i += 1) {
                              if (cm[i].name === columnName) {
                                  return i; // return the index
                              }
                          }
                          return -1;
                      },
                      modifySearchingFilter = function (separator) {
                          var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
                              filters = $.parseJSON(this.p.postData.filters);
                          if (filters &amp;&amp; filters.rules !== undefined &amp;&amp; filters.rules.length &gt; 0) {
                              rules = filters.rules;
                              for (i = 0; i &lt; rules.length; i++) {
                                  rule = rules[i];
                                  iCol = getColumnIndexByName.call(this, rule.field);
                                  cmi = cm[iCol];
                                  if (iCol &gt;= 0 &amp;&amp;
                                          ((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
                                              &amp;&amp; (rule.op === myDefaultSearch)) ||
                                          (typeof (cmi.searchoptions) === "object" &amp;&amp;
                                              $.isArray(cmi.searchoptions.sopt) &amp;&amp;
                                              cmi.searchoptions.sopt[0] === rule.op)) {
                                      // make modifications only for the 'contains' operation
                                      parts = rule.data.split(separator);
                                      if (parts.length &gt; 1) {
                                          if (filters.groups === undefined) {
                                              filters.groups = [];
                                          }
                                          group = {
                                              groupOp: 'OR',
                                              groups: [],
                                              rules: []
                                          };
                                          filters.groups.push(group);
                                          for (j = 0, l = parts.length; j &lt; l; j++) {
                                              str = parts[j];
                                              if (str) {
                                                  // skip empty '', which exist in case of two separaters of once
                                                  group.rules.push({
                                                      data: parts[j],
                                                      op: rule.op,
                                                      field: rule.field
                                                  });
                                              }
                                          }
                                          rules.splice(i, 1);
                                          i--; // to skip i++
                                      }
                                  }
                              }
                              this.p.postData.filters = JSON.stringify(filters);
                          }
                      },
                      dataInitMultiselect = function (elem) {
                          setTimeout(function () {
                              var $elem = $(elem), id = elem.id,
                                  inToolbar = typeof id === "string" &amp;&amp; id.substr(0, 3) === "gs_",
                                  options = {
                                      selectedList: 2,
                                      height: "auto",
                                      checkAllText: "all",
                                      uncheckAllText: "no",
                                      noneSelectedText: "Any",
                                      open: function () {
                                          var $menu = $(".ui-multiselect-menu:visible");
                                          $menu.width("auto");
                                          return;
                                      }
                                  },
                                  $options = $elem.find("option");
                              if ($options.length &gt; 0 &amp;&amp; $options[0].selected) {
                                  $options[0].selected = false; // unselect the first selected option
                              }
                              if (inToolbar) {
                                  options.minWidth = 'auto';
                              }
                              //$elem.multiselect(options);
                              $elem.multiselect(options).multiselectfilter({ placeholder: '' });
                              $elem.siblings('button.ui-multiselect').css({
                                  width: inToolbar ? "98%" : "100%",
                                  marginTop: "1px",
                                  marginBottom: "1px",
                                  paddingTop: "3px"
                              });
                          }, 50);
  
                      };
                  jQuery("#listTable").jqGrid({
                      url: 'HttpHandler/DemandHandler.ashx',
                      ajaxSelectOptions: { cache: false },
                      postData: { ActionPage: 'TransportType', Action: 'Fill', AssignStatus: 'U' },
                      datatype: 'json',
                      mtype: 'GET',
                      colNames: ['DemandId', 'Account', 'POC', 'COE', 'Type', 'Location', 'OpportunityName', 'Designation', 'Experience', 'ExpectedRole', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'RequiredDate', 'EndDate', 'Probable %', 'CriticalFlag', 'AssignedFlag', 'ConfidenceFactor', 'HiringSO', 'SOId', 'Comments', "# of Positions"],
                      colModel: [
                                      .........
                                      {
                                          name: 'COE', index: 'COE', width: '100%', stype: 'select', sortable: true, resizable: true, formoptions: { rowpos: 2, colpos: 1, elmsuffix: "(&lt;span class='mystar' style='color:red'&gt;*&lt;/span&gt;)" }, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
                                              style: "width: 150px",
                                              dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=coe',
                                              buildSelect: createSelectList
                                          }
                                      },
                                      .......
                      ],
                      width: '1785',
                      autowidth: false,
                      height: '500',
                      loadonce: true,
                      pager: '#pager',
                      gridview: true,
                      rowNum: 15,
                      rowList: [15, 30, 45],
                      rowTotal: 5000,
                      sortorder: 'desc',
                      sortname: 'DemandId',
                      viewrecords: true,
                      rownumbers: true,
                      toppager: true,
                      caption: 'Latest Demands',
                      emptyrecords: "No records to view",
                      loadtext: "Loading...",
                      refreshtext: "Refresh",
                      refreshtitle: "Reload Grid",
                      loadComplete: loadCompleteHandler,
                  }).jqGrid('bindKeys');
  
                  $('#listTable').bind('keydown', function (e) {
                      if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
                  });
  
               ...   
          &lt;/script&gt;
  
          .....
          &lt;body&gt;
          &lt;div style="width: 1185px; overflow: auto;"&gt;
              &lt;table id="listTable"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td /&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div id="pager"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>