Saturday, May 30, 2015

Search Web Part - Auto Results with Partials

Hi Everyone,

Have you ever heard this user complaint?  "SharePoint search sucks, when I use google it returns results as I type and I don't need to use these wildcards"   I'm guessing if you work in this field you have.   Well here is the solution.  In this particular scenario I am attempting to search a list we maintain that is updated during site provisioning with the site name, url, and account ID so you will notice those are the fields selected.   You will need to modify that part with your field names. 

I am doing this in an on-prem 2013 environment.  

First download the files attached to this blog post and throw them in your style library.   Modify the code below to point at your list and your field names.   You will need to find your list GUID, to do that just google "find SharePoint list GUID"

jquery.spin.js

jquery-2.1.4.min.js

ajax-loader.gif

Once you've uploaded the files you can then place a script editor on a page, enter the script below, and you are in business. 

<style>

.loadinggif {

background:url('/Style%20Library/Images/ajax-loader.gif') no-repeat right center;

}

/font>/style>

<script src="/Style%20Library/Scripts/jquery-2.1.4.min.js" type="text/javascript">/font>/script>

<script src="/Style%20Library/Scripts/jquery.spin.js" type="text/javascript">/font>/script>

<script type="text/javascript">

var ajaxRequest = null;

var delay = (function(){

var timer = 0;

return function(callback, ms){

clearTimeout (timer);

timer = setTimeout(callback, ms);

};

})();

$(document).ready(function() {

$('#txtSearch').keyup(function() {

var x = this.value;

delay(function() {

if (x.length > 2) {

if (ajaxRequest != null) ajaxRequest.abort();

$('#txtSearch').addClass('loadinggif');

ajaxRequest = $.ajax({

url: location.protocol + "//YourSharePointSite/_api/web/lists(guid'125B62CA-611B-4157-9A6D-78983A53033B')/items?$select=Title,SiteUrl,AccountId,Id&$filter=substringof('" + x + "',Title) or substringof('" + x + "',AccountId)&top=20",

type: "GET",

headers: { "accept": "application/json;odata=verbose" },

success: function (data) {

$("#lstResults").empty();

var lstContents;

$.each(data.d.results, function(i, item) {

if (item.AccountId == null)

item.AccountId = '';

$("#lstResults").append("<li style='background: none; padding: 0 0 10px 0; margin: 0'><div><a style='font-size: medium; font-weight:bold;' color: #a00 href='" + item.SiteUrl + "'>" + item.Title + " (" + item.AccountId + ")</a></div></li>");

});

$('#txtSearch').removeClass('loadinggif');

},

error: function (xhr, textStatus, errorMessage) {

if (xhr.status === 0 || xhr.readyState === 0) {

return;

}

$('#txtSearch').removeClass('loadinggif');

}

});

}

else {

$("#lstResults").empty();

}

}, 500);

});

});

/font>/script>

/font>/head>

<body>

<h4>Enter your search text below. After typing three letters or numbers results will be delivered automatically, including partials./font>/h4>

<div style="text-align: left;">

<input id="txtSearch" style="display: inline-block; height: 18px; width: 200px;" autocomplete="off" /><div class="spin">/font>/div>

/font>/div>

<div style="text-align: left;">

<label id="lblResult">/font>/label>

<br/>

<ul id="lstResults">

/font>/ul>

/font>/div>


by Rick Mucha via Everyone's Blog Posts - SharePoint Community

No comments:

Post a Comment