Search jQuery

jQuery Forum

Using jQuery

nareshss_..

Filter on Multiselect box and options are moving from right to left & and left to right

in Using jQuery • 8 years ago

Hi ,

below code is working fine, but while filter is applied if you use move left and right ,i am facing problem,

please can any body help us in this case.

1) Individual Filter is working fine.

2) Move right and left is also working fine

3) if filtered options are moving to right to left or vice versa , then remove the filter text then , see moved options are back to the list . orginal list is appearing.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <style type="text/css">
  .incompatibilita-div{
   border-color: #538DD4;
   border-style: solid;
   border-width: 1px;
   padding: 30px 30px 30px 30px ;
   margin: 30px 30px 30px 30px;
   text-align: left;
  }
  </style>
</head>
<body>
<div class="incompatibilita-div">
  <form action="check" name="liste" id="liste" method="get">
   <table border="0">
    <tr>
     <td class="text" >Modem Filter:</td>
     <td><input type="text" id="modemfilter"/></td>
     <td>          </td>
     <td class="text" >Phone Filter:</td><td><input type="text" id="phonefilter"/></td>
    </tr>
    <tr><td height="15px;" colspan="5"></td></tr>

    <tr>
     <td>Modem:</td>
     <td>
      <select size="10" class="scrollableinside" id="modemlist">
       <option value=100>Modem one</option>
       <option value=101>Modem two</option>
       <option value=102>Modem Onetwo</option>
       <option value=103>Modem three</option>
      </select>
     </td>
     <td>
      <table class="add-del">
       <tr>
        <td align="left">
         <input class="add-button" type="button" id="moveToRightButton" id="moveToRightButton" value=">>">
        </td>
       </tr>
       <tr>
        <td align="right">
         <input class="del-button" type="button" id="moveToLeftButton" id="moveToLeftButton" value="<<">
        </td>
       </tr>
      </table>
     </td>
     <td>Phone:</td>
     <td>
      <select size="10" class="scrollableinside" id="phonelist">
       <option value=103>Phone Iphone</option>
       <option value=100>Phone Nokia</option>
       <option value=101>Phone Samsung</option>
       <option value=102>Phone Micromax</option>
       <option value=103>Phone Blackberry</option>
      </select>
     </td>
    </tr>
   </table>
  </form>
</div>
<script type="text/javascript">
  var showOnlyOptionsSimilarToText = function (selectionEl, str, isCaseSensitive) {

   if (isCaseSensitive)
    str = str.toLowerCase();
   // cache the jQuery object of the <select> element
   var $el = $(selectionEl);
   if (!$el.data("options")) {
    // cache all the options inside the <select> element for easy recover
    $el.data("options", $el.find("option").clone());
   }
   var newOptions = $el.data("options").filter(function () {
     var text = $(this).text();
     if (isCaseSensitive)
      text = text.toLowerCase();
     return text.match(str);
    });
   $el.empty().append(newOptions);
   //$('#modemlist1').data("options").empty().append(newOptions);

  };

  var showOnlyOptionsSimilarToTextInp = function (selectionEl, str, isCaseSensitive) {

   if (isCaseSensitive)
    str = str.toLowerCase();
   // cache the jQuery object of the <select> element
   var $el = $(selectionEl);
   if (!$el.data("options")) {
    // cache all the options inside the <select> element for easy recover
    //$el.listview("refresh");
    $el.data("options", $el.find("option").clone());
   }
   var newOptions = $el.data("options").filter(function () {
     var text = $(this).text();
     if (isCaseSensitive)
      text = text.toLowerCase();
     //$el.listview("refresh");
     return text.match(str);
    });

$el.empty().append(newOptions);
};

  $( "#modemfilter" ).keyup(function() {
   var userInput = $("#modemfilter").val();
   showOnlyOptionsSimilarToText($("#modemlist"), userInput ,true);
  });
  $( "#phonefilter" ).keyup(function() {
   var userInputinp = $("#phonefilter").val();
   showOnlyOptionsSimilarToTextInp($("#phonelist"), userInputinp ,true);
  });

  $("#moveToRightButton").click(function () {
   var size_list = $('#modemlist').attr('size');
   var size_listincomp = $('#phonelist').attr('size');
   var parsesizlist=parseInt(size_list);
   var parsesizlistincomp=parseInt(size_listincomp);
   $("#modemlist > option:selected").each(function () {
    parsesizlist--;
    parsesizlistincomp++;
    $(this).remove().appendTo("#phonelist");
     var opts = $('#phonelist option').get();
    $('#phonelist ').html(opts.sort(optionSort));
   });
   $('#modemlist').attr('size', parsesizlist);
   $('#phonelist').attr('size', parsesizlistincomp);
  });

  $("#moveToLeftButton").click(function () {
   var list_size = $('#modemlist').attr('size');
   var listincomp_size = $('#phonelist').attr('size');
   var listparsesiz=parseInt(list_size);
   var listincompparsesiz=parseInt(listincomp_size);
   $("#phonelist > option:selected").each(function () {
    listincompparsesiz--;
    listparsesiz++;
    $(this).remove().appendTo("#modemlist");
    var opts = $('#modemlist option').get();
    $('#modemlist ').html(opts.sort(optionSort));
   });
   $('#modemlist').attr('size', listparsesiz);
   $('#phonelist').attr('size', listincompparsesiz);
  });

  function optionSort(a, b) {
   return $(a).val() > $(b).val();
  }
</script>
</body>
</html>

Response title

Attachments

jQuery Forum

Filter on Multiselect box and options are moving from right to left & and left to right

Statistics

Tags

Actions