search in sharepoint list using jQuery

Question

I need to implement search in a SharePoint 2013 site home page where in the search results should be probably from a list with list name ListA (with column name Project Name and Project Category). The search results should only be from the two columns mentioned above. Once the search results appear, after selecting a particular search result it should re-direct to its particular details page(Projectdetails.aspx)

We're trying to use jQuery/REST API in SharePoint Designer 2013.

Please let me know for any further information. Thanks in advance!

Muhammad Murad Haider Muhammad Murad Haider · Accepted Answer · 2020-02-18T08:29:31

If you need an Idea to do that, you can do the following:

Create HTML Design in a txt file

This includes creating html for Search input box or any other controls, search button and a div to show search results.
Upload this file somewhere on the site (e.g. Style library/html)

Write Javascript

Write Javascript to perform validation.
Write click event for search button. Use JSOM to retrieve list items based on a CAML Query that takes the input from controls and retrieves list items based on user specified values.
In success handler of your function, retrieve id's for matched items, and use these id's to create dynamic html to redirect to display form (Details) of the item e.g. (<a href="https://serverurl/lists/yourlist/DispForm.aspx?ID=[id-of-matched-item]"><span>[Item's Title]</span></a>)
Populate the div (that you created in html) with dynamic html (e.g. $('#yourdivid').html(dynamicHTML));
upload this JS file on somewhere on your site (e.g.Style Library/JS)
refer this JS file in your HTML

Create Content Editor Webpart

Go to the page where you want to put your search control and edit the page. Insert a Content editor webpart, and in webpart's configurations, refer the txt (html) file then save the page. hope this helps

EDIT : To retrieve items from a list using CAML query, you can use JSOM

function GetSearchResults() {  //search button click handler
// Get textboxes' text.. 'tboxProjectName' and 'tboxProjectCategories' are id's that you assign to textboxes in your html.
var projectNameVal = $('#tboxProjectName').val();
var projectCategoryVal = $('#tboxProjectCategory').val();
//Get SP Context
var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var list = web.get_lists().getByTitle("ListA");
    var camlQuery = new SP.CamlQuery();
    //you can modify query text according to your data types and applying operators different than <Contains> e.g. <Eq>, <Lt>, <Gt> etc.
    var camlText = '<View><Query><Where><Or><Contains><FieldRef Name="Project_x0020_Name"/><Value Type="Text">' + projectNameVal +'</Value></Contains><Contains><FieldRef Name="Project_x0020_Category"/><Value Type="Text">' + projectCategoryVal +'</Value></Contains></Or></Where></Query></View>';
camlQuery.set_viewXml(camlText);
this.collListItem = list.getItems(camlQuery);
context.load(collListItem);
context.executeQueryAsync(getResultsSuccess,onFailure);
}

function getResultsSuccess() {
    var listItem;
    var html = '';
    var dispFormUrl = "https://yourserver.com/lists/lista/dispform.aspx?ID="
    var listEnumerator = collListItem.getEnumerator();
    while (listEnumerator.moveNext()) {
        listItem = listEnumerator.get_current();
        html += '<a href = "'+dispFormurl+listItem.get_item("ID")+'"><span>'+listItem.get_item("Title")+'</a> <br />'

}
$('#yourdivID').html(html)
    }
function onFailure(sender,args)
{
 alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

search in sharepoint list using jQuery

1 Answers