How to search for all subsites title and url using Rest

Question

I have a autocomplete search box when typing in my box I want to display the title of the subsite and also url

Here is my search box

 <div id="searchfield"> <input type="text" name="currency" class="biginput" id="autocomplete"/> </div>

Here is my code I app.js right now nothing gets displayed, event if I have an subsite named SubSite1

'use strict'; var hostweburl; var appweburl; // This code runs when the DOM is ready and creates a context object which is // needed to use the SharePoint object model $(document).ready(function () { //Get the URI decoded URLs. hostweburl = decodeURIComponent( getQueryStringParameter("SPHostUrl")); appweburl = decodeURIComponent( getQueryStringParameter("SPAppWebUrl")); // Resources are in URLs in the form: // web_url/_layouts/15/resource var scriptbase = hostweburl + "/_layouts/15/"; // Load the js file and continue to load the page with information about the list top level folders. // SP.RequestExecutor.js to make cross-domain requests // Load the js files and continue to the successHandler $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest); }); function execCrossDomainRequest() { // executor: The RequestExecutor object // Initialize the RequestExecutor with the app web URL. var executor = new SP.RequestExecutor(appweburl); // Issue the call against the app web. // To get the title using REST we can hit the endpoint: // The response formats the data in the JSON format. // The functions successHandler and errorHandler attend the // sucess and error events respectively. executor.executeAsync( { url: appweburl + "/_api/SP.AppContextSite(@target)/web/webs?@target='" + hostweburl + "'", method: "POST", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { var subsite= JSON.stringify(data); $('#autocomplete').autocomplete({ lookup: subsite, }) } } ); } // This function prepares, loads, and then executes a SharePoint query to get // the current users information //Utilities // Retrieve a query string value. // For production purposes you may want to use // a library to handle the query string. function getQueryStringParameter(paramToRetrieve) { var params = document.URL.split("?")[1].split("&"); for (var i = 0; i < params.length; i = i + 1) { var singleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) return singleParam[1]; } }

John-M · Accepted Answer · 2015-01-09 14:49:56Z

You have to make an array out of the response data to provide the values for the source of the autocomplete widget.

In the callback you need to take the returned data and transform it a bit, I would also recommend changing your request URL to only pull the data you want from the webs instead of retrieving everything by using a $select statement.

executor.executeAsync({ // use a $select statement on the URL to make our result response smaller url: appweburl + "/_api/SP.AppContextSite(@target)/web/webs?$select=Title,ServerRelativeUrl&@target='" + hostweburl + "'", // using GET as the request method here better describes the intended // operation and allows the client and the server to cache the results method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function(data) { // we'll map the results object into a properly structured array // using jQuery.map, but in order to use that we need an array to // work with first, so we'll use jQuery.makeArray on the results var dataArr = $.makeArray(data.d.results); var resultArr = $.map(dataArr, function(item) { return { label: item.Title, value: item.ServerRelativeUrl }; }); $('#autocomplete').autocomplete({ source: resultArr }); } });

Note I've used the label/value syntax described in the jQuery UI documentation; this makes it so that the dropdown displays the values for the web Title, but when selected will take on the value of the ServerRelativeUrl property. If you wanted to do something different like display the URL as part of dropdown you could put in parenthesis after the web title with some simple string concatenation.

label: item.Title + " (" + item.ServerRelativeUrl + ")", value ...

Something else important to note, this will also give you values for all of the apps installed in the host web too (in addition to just sub-sites)... which may not be exactly what you want to see in the dropdown. And even if you do want to see them, you'll need to add all the standard tokens to the URL values if you intend to navigate to them using the dropdown. I'll leave that as an exercise for you :) but it's something to consider.

its not working nothing gets displayed

Batistuta
– Batistuta

2015-01-10 15:05:58 +00:00
Commented Jan 10, 2015 at 15:05 — Batistuta
– Batistuta, Commented Jan 10, 2015 at 15:05

Amal Hashim · Accepted Answer · 2015-01-09 13:22:56Z

AutoComplete should be initialized as below

$('#autocomplete').autocomplete({ source: subsite });

Stack Exchange Network

How to search for all subsites title and url using Rest

2 Answers 2

Hot Network Questions

How to search for all subsites title and url using Rest

2 Answers 2

Related

Hot Network Questions