7

I have a long page on SharePoint 2010 that needs to be searchable for keywords on that page. Apparently the target group is "unable/unwilling" to learn Ctrl-F so I was asked to create a permanent search field on the page recreating that functionality. I have created an HTML navigation through the page that allows the user to "return to top" from the section they get to but I have not yet been able to determine how to create the search functionality.

Any thoughts? I do not have access to SharePoint Designer, but may be able to use JQuery.

I've been looking into using Web parts to do this, as in I was hoping for a search page Web Part and then put the content into a Content Web Part and via "magic" the search Web part would search all Web parts on the page. I have not yet found such magic if it exists.

I tried Paul's suggestion below and can not get it to work, the field and button show up but there is no resulting functionality.

Improve this question
3

2 Answers 2

Reset to default
0

If you are able to inject javascript/jquery into the page, then this plugin might work for you. It allows you to highlight content on a page based on the value you give it on input. You can add this to the page via a Content Editor Webpart, display an input field and then when the user hits "Find", you can use the value entered to highlight the value... Example:

<label>Find Text</label>
<input id="userFindInputText" type="text" value=""/>
<button id="userFindInputButton" type="button">Find</button>

<script type="text/javascript">        

    (function($){

        $(function(){

            // REMOVE THIS LINE once its working
            if (!$.fn.highlight) { alert("Hightlight Plugin NOT LOADED!"); }


            var classNames      = "ms-status-yellow s4-status-s3 highlight",
                currentKeyword  = '',
                $container      = $("#s4-workspace"), // This selector assumes SP2010/2013. Use "body" if on SP2007
                highlight       = function(){

                    var findText = $("#userFindInputText").val();

                    if (!findText) {

                        alert("Enter a search value");
                        return this;

                    }

                    // Unhighlight any previous keywords
                    if (currentKeyword) {

                        $container.unhighlight({className: "highlight"});                            
                    }

                    currentKeyword = findText;
                    $container.highlight(findText, {className: classNames});                        
                    return this;
                };

            $("#userFindInputText").on("keyup", function(ev){
                if (ev.which === 13) {

                    highlight.apply(this, arguments);

                }
            });

            $("#userFindInputButton").on("click", highlight)

        });

    })(jQuery);

</script>

Paul.

Improve this answer
8
  • I'm unable to get this to work, the field and button show up but there is no functionality. No error on page error either.
    – Chris
    Commented Sep 4, 2014 at 19:45
  • Did you load the jQuery plugin mention? What error are you seeing in the console (if any)?
    – Paul T.
    Commented Sep 4, 2014 at 23:47
  • Just re-read your response. If no error, then insert a few alert() that check for the plugin. If that's loading, then check the jQuery version requirements for that plugin. I'll try to look at this a little closer next time I'm at a computer.
    – Paul T.
    Commented Sep 5, 2014 at 0:40
  • If you read the instructions on that plugin, it states that you need to setup a CSS class of .highlight that defines the color to be used when words are highlighted in the page. Sharepoint already has some classes you can use, so I have revised the code above to 1) use them (so you don't have to define new ones), 2) unhightlight keys words on subsequent finds and 3) enter key support. There is also an alert for debug purposes - checking that the plugin is loaded.
    – Paul T.
    Commented Sep 6, 2014 at 16:19
  • Thanks for your help Paul! Really appreciated. It's not working yet but I think I'm closer. I added the updated code you provided with CSS & and JQuery and got the plugin not loaded error. When trying the search I get this error: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3) Timestamp: Wed, 17 Sep 2014 16:03:24 UTC Message: Object doesn't support this property or method Line: 876 Char: 21 Code: 0 URI: site
    – Chris
    Commented Sep 17, 2014 at 16:06
0

Does metadata navigation search not do what you are looking for? Using that you can select multiple filters to search through the page. It's located in list settings.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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