I want to search a list or library item in SharePoint 2013. We have a big list. We need to search the item on the home web part page. Its working IE, but doesn't work properly in chrome and also the fields have an issue ? I need help ? Thanks
<input type="text" style="width:350px" id="txtSearch" />
<input type="button" style=" font-size:15px;font-family:'Segoe UI
Light','Segoe UI','Segoe',Tahoma,Helvetica,Arial,sans-serif; background-
color:#0072C6; color:white" id="btnSearch" value="Search" onclick="return
search();" />
<style>
.highlight {
background-color: #FFFF88;
}
</style>
<script type="text/javascript"
src="https://my.ABC.com/sites/sandbox1/TEST/test/SiteAssets/jqueryy-
3.2.0.min.js"></script>
<script type="text/javascript">
/*
*This is jQuery Highlight plugin to highlight the result text
*/
jQuery.extend({
highlight: function (node, re, nodeName, className) {
if (node.nodeType === 3) {
var match = node.data.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'span');
highlight.className = className || 'highlight';
var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element
nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and
style nodes
!(node.tagName === nodeName.toUpperCase() && node.className ===
className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName,
className);
}
}
return 0;
}
});
jQuery.fn.unhighlight = function (options) {
var settings = { className: 'highlight', element: 'span' };
jQuery.extend(settings, options);
return this.find(settings.element + "." + settings.className).each(function
() {
var parent = this.parentNode;
parent.replaceChild(this.firstChild, this);
parent.normalize();
}).end();
};
jQuery.fn.highlight = function (words, options) {
var settings = { className: 'highlight', element: 'span', caseSensitive:
false, wordsOnly: false };
jQuery.extend(settings, options);
if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i){
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) { return this; };
var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
return this.each(function () {
jQuery.highlight(this, re, settings.element, settings.className);
});
};
</script>
<script type="text/javascript">
function search()
{
$("#tasksUL").empty();
var qry= document.getElementById("txtSearch").value
var soapEnv =
"<soapenv:Envelope
xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems
xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Test</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='ID' /> \
</ViewFields> \
</viewFields> \
<query> \
<Query>
<Where>
<or>
<Contains>
"+qry+"
<Contains>
"+qry+"
<Contains>
"+qry+"
</Query> \
</query> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url:
"https://my.ABC.com/sites/sandbox1/Training/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
}
function processResult(xData, status) {
// show searching text and image when search button is clicked
var loadhtml="<div id='loading' class='ms-dlgLoadingTextDiv'><span
style='padding-top: 6px; padding-right: 10px;'><img width='24' height='24'
title='This animation indicates the operation is in progress. Click to
remove this animated image.' src='/_layouts/15/images/gears_anv4.gif?
rev=36'/></span><span class='ms-core-pageTitle ms-accentText'>Searching...
</span></div>";
//var totalRows = $(xData.responseXML).find("rs\\:data").attr("ItemCount");
var totalRows = getZRows(xData.responseXML);
if(totalRows=="0")
{
$("#loading").remove();
$("#tasksUL").before("<div id='loading' style='color:red;font-
size:15px'>No matching records found. Please refine your search.</div>");
return true;
}
$("#tasksUL").before(loadhtml);
$(xData.responseXML).find("z\\:row, row").each(function() {
// creating hyperlink for each item to display form of that list item
var lnk="<a
href='https://my.ABC.com/sites/sandbox1/Training/Lists/Test/DispForm.aspx?
ID=" + $(this).attr('ows_ID') + "'>"+ $(this).attr("ows_Title") +"</a>";
var liHtml = "<li>"+ lnk+"</li>";
// 2 second delay and show searching text and image also highlight the
result with the searched keyword
setTimeout(function(){
$("#loading").remove();
$("#tasksUL").append(liHtml);
$("#tasksUL > li").highlight(document.getElementById("txtSearch").value);
}, 2000);
});
}
$(document).ready(function(){
// check if enter button is pressed and then search button clicked event is
called
$('#txtSearch').keypress(function(e){
if(e.keyCode==13)
$('#btnSearch').click();
});
});
</script>
<script type="text/javascript">
function getZRows(rXML) {
var rows;
var itemCount = $(rXML).find("rs\\:data").attr("ItemCount");
if (rXML.getElementsByTagName("z:row").length == 0 && itemCount ==
undefined) {
rows = rXML.getElementsByTagNameNS("*", "row");
} else {
rows = rXML.getElementsByTagName("z:row");
}
return rows.length;
}
</script>
<div id="search_result">
<ul id="tasksUL"/>
</div>
