Visual Best Bets with SharePoint Server using jQuery (not FAST)

Purely for demonstration purposes only I needed to quickly mock-up some visual best bets in SharePoint Server without using FAST. Thanks to the power of jQuery it took just 4 lines of script!

Setup

I’m assuming you have jQuery already deployed somewhere accessible to your site collection, if not, download it and upload jquery-X.X.X.min.js somewhere you can reference it, like the master page library for example.

First, create the HTML content you want to use as your new Visual Best Bet, here’s mine:

image

It’s not my best work but this is only a mock-up….Winking smile

Upload this html content to SharePoint somewhere.

Note: make sure you save and upload it as an ASPX file and not an HTML or HTM file otherwise you wont be able to access it directly due to the default Browser File Handling setting on the web application.

Next, create another HTML file that includes the following script:

<script type=’text/javascript’ src=’/_layouts/inc/jQuery/jquery-1.4.2.min.js’></script>
<script type=’text/javascript’>
    $(document).ready(function () {
        var u = $(‘.srch-BB-URL2’).html();
        $.get(u, function (data) { $(‘.srch-BestBets’).html(data); });
    });
</script>

Note: The first line should be updated to point to your copy of the jQuery js file.

Upload this file to SharePoint somewhere.

Create standard Best Bet

Next we’re going to create a standard Best Bet. From our site collection (that hosts our Search Center) select Site Actions –> Site Settings –> Site Collection Administration – > Search Keywords. From the Manage Keywords screen create a new keyword:

image

Assign a new Best Bet to the keyword:

image

The URL you enter for the Best Bet should be the URL of  your HTML content you uploaded earlier as an ASPX file. Next, access your Search Center and test the Keyword and Best Bet is working:

image

Now edit your search results page and below the existing Search Best Bets web part, add a new content editor web part. Finally set the Content Link property of the content editor web part to be the URL of the script file you uploaded earlier and set the web part chrome type to ‘None’.

Save the page and execute your search again.

Now when the page loads, the jQuery script finds the URL from the standard Best Bet we defined, loads the HTML content from the URL via asynchronous Ajax and finally replaces the contents of the out of the box Best Bets web part with our HTML:

image

Please note, this is only a mock-up and not production quality code but it does illustrate the power of jQuery and Ajax quite nicely

Enjoy!

Advertisements

One Response to Visual Best Bets with SharePoint Server using jQuery (not FAST)

  1. David Lozzi says:

    Very cool!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: