Executing Search Queries using ECMA Script in SharePoint 2013

Kaarthikeya 3/04/2015 02:09:00 am 2 comments

Hi All,
In the Current Example we will see execute Search Queries using JavaScript Client Side Object Model(JSOM) ECMA Script.

In SP2010 we were limited to the search web service.We need to reference to the search web service and had to build XML Queries which could be complicated and at times hard to debug . In 2013 the search web service has been deprecated, and we now have client –side object model and REST which we can utilize to perform searches.

 In Page we have ,
searchTextBox – A standard HTML input that users can input text into.
searchButton- A standard HTML button that has JQuery click event attached to it.
I have created one Page and added in Content Editor Web Part to that Page and map the Path of the Script.script is located at “Style Library”.

 we need to add, following references in script file.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.search.js"></script>

The last three scripts are comes up with every SharePoint installation.
Find the below code snippet.
<html>
<head>
    <title></title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.search.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', FunctionReady);
        });

        function FunctionReady() {
            $('#btnSearch').on('click', function () {
                //creating the context
                var context = SP.ClientContext.get_current();
                //Create the Query
                var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(context);
                keywordQuery.set_queryText($("#searchTextBox").val());
                //Search Executer
                var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(context);
                //get the results
                results = searchExecutor.executeQuery(keywordQuery);
                //processing the results
                context.executeQueryAsync(onQuerySuccess, onQueryError);
            });
        }
        function onQuerySuccess() {
            //assigning zero to var for count
            var count = 0;
            //Clear the values
            $("#searchResults").html("");
            $("#searchResultsCount").html("");
            //Iterate search results and generate table
            $.each(results.m_value.ResultTables[0].ResultRows, function () {
                $("#searchResults").append('<div>');
                $("#searchResults").append(this.Title + ':' + this.Path + "-<a href-'" + this.Path + "'>Open Item</a>");
                $("#searchResults").append('</div>');
                count++;
            });
            $("#searchResultsCount").html(count + "results.");
        }
        function onQueryError(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    </script>
</head>
<body>
    <input type="text" id="searchTextBox" />
    <br />
    <input type="button" id="btnSearch" value="Search" />
    <p id="searchResults">
    </p>
    <label id="searchResultsCount"></label>

</body>
</html>

We can see output as follows,

Thanks.

Related Post

2 comments: