Stump the Panel

SharePoint Q&A

Stump the Panel » jQuery for Everyone

1. 

   suzyshush
   Member

   Would someone please nudge me in the right direction? I feel like I'm all over the map in trying to invent a way to make this work. This is for my hospital's Registration Manual.

   I have a very large list with three key columns: Initial Visit Code, Second Visit Code, and Action. My goal was to provide a look-up search for our Registration staff to quickly look up an action based upon two other codes. They don't want to have the results displayed out of the box because that will take the user to another search results page, and they want to stay on the "Same Day Visit Look-up" page. They also prefer not to use Views because they want the staff to identify the first code, then the second code specifically, and have the page display only one action.

   I found an example of something I'd like implement. It's the Table example found here: http://rikrikrik.com/jquery/quicksearch/. The title of the article is "jQuery quickSearch plug-in". I would like to try to search for the Initial Visit Code at the minimum, but ideally have another search box for the Second Visit Code (and of course tie them to my code list to only give the user the available codes as options). I would like the list to miraculously shrink to the only available option in the list!

   Is this possible, or am I going to be limited to Views? I'm presently in the Advanced Search box avenue....don't know how long I will stay there, but is that my only option?

   Thanks very much for any input.
   Suzanne

   Posted 1 month ago #
2. 

   27palms
   Member

   I have a jquery which I think does pretty much what you are looking for. If not it should take you pretty close to where you want to be.

   I claim no credit for this script as I copied it from a link I found a while back and then promptly lost the link! I've not managed to find it again since! I'd dearly love to thank the original author as this script has gotten me out of jail a thousand times.

   All credit to the unknown SharePoint superstar wherever they are.

   Instructions: Copy the script below into a content editor web part and placed on the same page as your list

   Behaviour: A search box will appear beneath each column heading in the list. You can partial search strings in any of the boxes and it will thin out the list below

   ----------
   `
   <script src="http://www.google.com/jsapi"></script>
   <script>
   google.load("jquery", "1.2.6");
   google.setOnLoadCallback(function() {
   $(document).ready(function()
   {
   jQuery.extend(jQuery.expr[':'], {
   containsIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
   });

   $("table.ms-listviewtable tr.ms-viewheadertr").each(function()
   {
   if($("td.ms-vh-group", this).size() > 0)
   {
   return;
   }

   var tdset = "";

   var colIndex = 0;

   $(this).children("th,td").each(function()
   {
   if($(this).hasClass("ms-vh-icon"))
   {
   // attachment
   tdset += "<td></td>";
   }
   else
   {
   // filterable
   tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";
   }

   colIndex++;
   });

   var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

   $(tr).insertAfter(this);
   });

   $("input.vossers-filterfield")
   .css("border", "1px solid #7f9db9")
   .css("width", "100%")
   .css("margin", "2px")
   .css("padding", "2px")
   .keyup(function()
   {
   var inputClosure = this;

   if(window.VossersFilterTimeoutHandle)
   {
   clearTimeout(window.VossersFilterTimeoutHandle);
   }

   window.VossersFilterTimeoutHandle = setTimeout(function()
   {
   var filterValues = new Array();

   $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
   {
   if($(this).val() != "")
   {
   filterValues[$(this).attr("filtercolindex")] = $(this).val();
   }
   });

   $(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
   {
   var mismatch = false;

   $(this).children("td").each(function(colIndex)
   {
   if(mismatch) return;

   if(filterValues[colIndex])
   {
   var val = filterValues[colIndex];

   // replace double quote character with 2 instances of itself
   val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));

   if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
   {
   mismatch = true;
   }
   }
   });

   if(mismatch)
   {
   $(this).hide();
   }
   else
   {
   $(this).show();
   }
   });

   }, 250);
   });
   });

   });

   </script>

   `

   Posted 1 month ago #
3. 

   AutoSponge
   Administrator

   suzyshush,

   I'm a little confused. Do you need searching or list filtering? How big is this list? How many items are displayed at any one time?

   Posted 4 weeks ago #
4. 

   suzyshush
   Member

   27palms - Thank you! I'm trying to figure out a bug I'm seeing now, but it created the search boxes, just getting a loading message.

   AutoSponge: I need kind of a combo of the two. Our registration reps need an easy way to look up an action based upon two codes. The list filtering gives them the option to filter on the column values, which is good, but I thought it also would be nice to give them the input box so that they could type a few letters if they wanted and find it faster. There are 400 rows in this list. Each list has a distinct initial code and second code.

   Thank you both very much for your responses...I will let you know how this turned out.

   Posted 3 weeks ago #
5. 

   27palms
   Member

   Found the link, the code was from Jaap Vosser's blog:

   http://blog.vossers.com/index.php/2009/03/30/released-sharepoint-instantlistfilter/

   Posted 3 weeks ago #
6. 

   eric
   Moderator

   http://www.endusersharepoint.com/?p=951 details how to do a page level search with jQuery.

   There is also the possibility of creating specific search scopes for the list items.

   Posted 3 weeks ago #
7. 

   suzyshush
   Member

   27palms: thanks again for finding the post and offering this information to me. It's exactly what I needed. I got a copy of instantlistfilter.js from codeplex and installed it on one of my portals in our standard Javascript directory.

   I included a reference to the .js file in my site master page, registrationManual.master. When I View-->source, I'm seeing the reference to the script. I had created a page, and included a view of the code list on the page, restricting the view to just three columns. When you include the reference to the script in your master page, you don't need the CEWP, so I eliminated it. Now when my page refreshes, I see the input boxes at the tops of the columns, but I'm getting an error when I try to enter a few characters into any of the boxes. The error is pointing to a line number that doesn't exist in the source code, and the error states "Function expected". I'm using IE6 <not a personal choice>. I also tried this in Firefox, and although I'm not getting an error, the action of typing the characters into the boxes isn't causing any kind of action, so the list items are not miraculously disappearing as hoped for. I'm trying to figure it out with Firebug, so I'll let you know if I am successful at getting this to work. BTW, I thought that perhaps my master page was not good, so I backed out to the previous version, and it looked fine. It'll be sweet when I get this to work, so it's gotta be something obvious to everyone else! Thanks again.

   Posted 3 weeks ago #
8. 

   suzyshush
   Member

   This is sweet! I just read the Discussion board (duh) and someone had pointed out that if you are using jquery version 1.3.2 some code needed to be changed, so I edited the source code to this, and it worked!

   $(document).ready(function()
   {

   jQuery.extend(jQuery.expr[':'], {
   containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}
   });

   Thanks a lot, guys!

   Posted 3 weeks ago #

RSS feed for this topic

Reply

You must log in to post.