5

I am looking for a solution for the following problem:

I have a large list that is related to a second list. The two list web parts are on one page, when you select an item in the first list, the second list is filtered by the value passed on from the first list.

In order to improve using this feature I am using a jQuery search box in a CEWP:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Instant search:<br><input type="text" class="search" style="padding: 10px;"/>
<script type="text/javascript">
jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};
$(document).ready(function(){
  $("input.search").change(function() {
      var txt = $("input.search").val();
if (txt) {
     $("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
     $("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();
    } else {
     $("#WebPartWPQ2").find("tr.ms-itmhover").show();
    }
  }).keyup(function(){$(this).change();
 });
});
</script>

Everything works fine up to this point. However, when I select an Item, the page is refreshed and the value entered in the input field is cleared, resulting in the right item being selected, but the selection made previously has disappeared.

What I was thinking now is saving the value of the txt variable in a cookie. On page load, the value of the cookie is set as default filter value and displayed in the input field.

So here's what I got now:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js" type="text/javascript"></script>
Instant search:<br><input type="text" class="search" style="padding: 10px;"/>
    <script type="text/javascript">
    jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};
    $(document).ready(function(){
       var txy = $.cookie("coo");
       if (txy) {
         $("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txy+"))").hide();
         $("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txy+")").show();
        } else {
         $("#WebPartWPQ2").find("tr.ms-itmhover").show();
        }
    });
    $(document).ready(function(){
      $("input.search").change(function() {
          var txt = $("input.search").val();
    if (txt) {
         $("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
         $("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();
        } else {
         $("#WebPartWPQ2").find("tr.ms-itmhover").show();
        }
      }).keyup(function(){$(this).change();
     });
    });
 $.cookie("coo", txt);
</script>

This is not working unfortunately. I am a beginner in jQuery, any help with this code is appreciated.

Thanks,

Jakob

0

I wrote about this same thing in my blog. (Not trying to plug). Here is the jist of the solution. Use local storage in HTML.

<script type=”text/javascript” src=”../../Style Library/js/jquery-1.11.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“input[id$=’TextField’]”).filter(“input[title=’Name’]”).val(localStorage.getItem(‘name’));
localStorage.removeItem(‘name’);
});

function AddItemRefresh()
{
var name = $(“input[id$=’TextField’]”).filter(“input[title=’Name’]”).val();
localStorage.setItem(“name”, name );
location.reload();
}
</script>

Using local storage: http://www.w3schools.com/html/html5_webstorage.asp

0

This looks like a scoping issue. $.cookie("coo", txt); is outside of the $(document).ready function. Put it inside the function:

$(document).ready(function(){
      $("input.search").change(function() {
          var txt = $("input.search").val();
    if (txt) {
         $("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
         $("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();
        } else {
         $("#WebPartWPQ2").find("tr.ms-itmhover").show();
        }
      }).keyup(function(){$(this).change();
     });
     $.cookie("coo", txt);
    });
0

Thank you, with your hint using the HTML local storage I was able to come up with a working solution:

jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};

 jQuery(document).ready(function($) {

 var z = localStorage.getItem("term");
document.getElementById("anzeigen").value = z;
if (z) {
 $("#WebPartWPQ3").find("tr.ms-itmhover:not(:Contains("+z+"))").hide();
 $("#WebPartWPQ3").find("tr.ms-itmhover:Contains("+z+")").show();
} else {
 $("#WebPartWPQ3").find("tr.ms-itmhover").show();
}$("#anzeigen").change(function() {
  var txt = $("#anzeigen").val();
  localStorage.setItem("term", txt); if (txt) {
 $("#WebPartWPQ3").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
 $("#WebPartWPQ3").find("tr.ms-itmhover:Contains("+txt+")").show();
} else {
 $("#WebPartWPQ3").find("tr.ms-itmhover").show();
}}).keyup(function(){$("#anzeigen").change();});

This should work for anyone looking for a way to store a search term while the page is reloading.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.