//
you're reading...
Custom Project, FS4SP

Easy Search as you type.. ;)

è gia.. è proprio cosi, il search as you type, o tendina redazionale, o autocomplete della searchbox, chiamatelo come volete, fatto sta che ho realizzato un JS Jquery che mentre si digita la keyword di ricerca fa chiamate ajax al webservice di Fast per restituire in una tendina l’anteprima dei risultati.
Premettendo che i primi spunti sono stati presi dall’ idea di Jan Tielens, ho dovuto lavorarci un pò su e modificare parecchie cose.

Innanzitutto, la buca di ricerca del portale intranet che stiamo realizzando si trova nella HomePage e non è quella di default del Fast Search Center, ma è Custom e funziona facendo dei get al motore di ricerca, quindi ho aggiunto alla searchbox il mio Javascript, che come dicevo è un pò diverso da quello del link; io ho bisogno di effettuare due query per visualizzare sia i contenuti sia le persone, e mostrarli in base al tab selezionato per la ricerca. Le immagini che riporto sono di un ambiente di sviluppo.

17
Quando è selezionato il tab “tutto” la tendina si costruisce con i primi cinque risultati di Persone e  Contenuti.Due Query; quella per i contenuti ha come Result Provider FASTSearch, quella delle persone ha SharepointSearch. Come si nota i risultati delle persone sono correlati di foto e di alcuni dati, la query infatti è composta da molte Properties.


Nel tab “notizie” la tendina mostrerà l’anteprima dei      risultati dello scope Notizie.

Per il tab “documenti” vedremo l’anteprima dei contenuti con Content Type doc



Quando è selezionato il tab “persone” il JS costruirà la tendina con le prime 5 persone

Quindi la logica è: capire su che Tab siamo, se ci troviamo sul tab “tutto” effettuare due query una per i contenuti e una per le persone e costruire html, ELSE fare la query solo sui contenuti del tab (scope) e costruire la tendina html, infine se è selezionato il tab “persone” effettuare query persone e costruire html.

Non sarà Google Instant, ma va bene così…
Ecco il codice, non si sa mai dovessi perderlo;
————————————————————————————————————————————————————————————

<script type=”text/javascript” src=”http://matteolenzo-pc/Shared%20Documents/jquery.min.js”></script&gt;
<script type=”text/javascript”>
var quickSearchConfig = {
delay: 500, // time to wait before executing the query (in ms)
minCharacters: 3, // minimum nr of characters to enter before search
numberOfResults: 5, // number of results to show
resultsAnimation: 200, // animation time (in ms) of the search results
scopepeople: “People”,
resultAnimation: 0 // animation time (in ms) of individual result (when selected)
};

var quickSearchTimer;
var quickSearchSelectedDivIndex = -1;

function showResultsDiv(text) {
var div = $(“#quickSearchResults”);
var prevTable = div.prev();

var divCss = {
“left”: prevTable.offset().left,
“padding”: 2,
“position”: “absolute”,
“top”: “46px”,
“border”: “1px solid #7f9db9”,
“width”: “400px”,
“background”: “white”,
“max-width”: “400px”,
“z-index”: “1300”
};

div.css(divCss).append(text).slideDown(quickSearchConfig.resultsAnimation);
}

$(document).ready(function () {
$(‘#search-site’).keyup(function (event) {
var previousSelected = quickSearchSelectedDivIndex;

// catch some keys
switch (event.keyCode) {
case 13: // enter
var selectedDiv = $(“#quickSearchResults>div:eq(” + quickSearchSelectedDivIndex + “) a”);
if (selectedDiv.length == 1)
window.location = selectedDiv.attr(“href”);
break;
case 38: // key up
quickSearchSelectedDivIndex–;
break;
case 40: // key down
quickSearchSelectedDivIndex++;
break;
}

// check bounds
if (quickSearchSelectedDivIndex != previousSelected) {
if (quickSearchSelectedDivIndex < 0)
quickSearchSelectedDivIndex = 0;
if (quickSearchSelectedDivIndex >= $(“#quickSearchResults>div”).length – 1)
quickSearchSelectedDivIndex = $(“#quickSearchResults>div”).length – 2;
}

// select new div, unselect the previous selected
if (quickSearchSelectedDivIndex > -1) {
if (quickSearchSelectedDivIndex != previousSelected) {
unSelectDiv($(“#quickSearchResults>div:eq(” + previousSelected + “)”));
selectDiv($(“#quickSearchResults>div:eq(” + quickSearchSelectedDivIndex + “)”));
}
}

// if the query is different from the previous one, search again
if ($(‘#search-site’).data(“query”) != $(‘#search-site’).val()) {
if (quickSearchTimer != null) // cancel the delayed event
clearTimeout(quickSearchTimer);
quickSearchTimer = setTimeout(function () { // delay the searching
$(“#quickSearchResults”).fadeOut(200, initSearch);
}, quickSearchConfig.delay);
}
});
});

function unSelectDiv(div) {
// first stop all animations still in progress
$(“#quickSearchResults>div>div”).stop(true, true);

div.removeClass(“quickSearchResultDivSelected”).addClass(“quickSearchResultDivUnselected”);
$(“#details”, div).hide();
}

function selectDiv(div) {
div.addClass(“quickSearchResultDivSelected”);
$(“#details”, div).slideDown(quickSearchConfig.resultAnimation);
}

function initSearch() {
// first store query in data
$(‘#search-site’).data(“query”, $(‘#search-site’).val());

// clear the results
$(“#quickSearchResults”).empty();

// start the search
var query = $(“#search-site”).val();
if (query.length >= quickSearchConfig.minCharacters) {
//showResultsDiv(“Searching …”); // display status
peoplesearch(query);
if ($(‘.search > #sTabs > .acTab’).attr(‘tab’) != “People”) search(query);

}
}
function search(query) {
if ($(‘.search > #sTabs > .acTab’).attr(‘tab’) == “All”) {
quickSearchSelectedDivIndex = -1;

var queryXML = “<QueryPacket xmlns=’urn:Microsoft.Search.Query’> \
<Query><SupportedFormats> \
<Format revision=’1′>urn:Microsoft.Search.Response.Document:Document</Format></SupportedFormats> \
<Context><QueryText language=’en’ type=’string’>” + query + “*</QueryText></Context> \
<ResultProvider>FASTSearch</ResultProvider> \
<Range><Count>” + quickSearchConfig.numberOfResults + “</Count><StartAt>1</StartAt></Range> \
<EnableSpellcheck>Suggest</EnableSpellcheck> \
<ImplicitAndBehavior>true</ImplicitAndBehavior> \
<SortByProperties><SortByProperty name=” direction=’Descending’></SortByProperty></SortByProperties> \
</Query></QueryPacket>”;

}
else {
var scope = $(‘.search > #sTabs > .acTab’).attr(‘tab’);
quickSearchSelectedDivIndex = -1;

var queryXML = ‘<QueryPacket xmlns=”urn:Microsoft.Search.Query”> \
<Query><SupportedFormats> \
<Format revision=”1″>urn:Microsoft.Search.Response.Document:Document</Format></SupportedFormats> \
<Context><QueryText language=”en” type=”string”>scope:”‘ + scope + ‘” ‘ + query + ‘*</QueryText></Context> \
<ResultProvider>FASTSearch</ResultProvider> \
<Range><Count>’ + quickSearchConfig.numberOfResults + ‘</Count><StartAt>1</StartAt></Range> \
<EnableSpellcheck>Suggest</EnableSpellcheck> \
<ImplicitAndBehavior>true</ImplicitAndBehavior> \
<SortByProperties><SortByProperty name=”” direction=”Descending”></SortByProperty></SortByProperties> \
</Query></QueryPacket>’;
}
var soapEnv =
“<soap:Envelope xmlns:xsi=’http://www.w3.org/2001/XMLSchema-instance&#8217; xmlns:xsd=’http://www.w3.org/2001/XMLSchema&#8217; xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soap:Body> \
<Query xmlns=’urn:Microsoft.Search’> \
<queryXml>” + escapeHTML(queryXML) + “</queryXml> \
</Query> \
</soap:Body> \
</soap:Envelope>”;

$.ajax({
//async: “false”,
url: “/_vti_bin/search.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\””
});

function processResult(xData, status) {
var html = “”;
$(xData.responseXML).find(“QueryResult”).each(function () {
var divWidh = $(“#quickSearchTable”).width() – 13;

var x = $(“<xml>” + $(this).text() + “</xml>”);
x.find(“Document”).each(function () {
var title = $(“Title”, $(this)).text();
var url = $(“Action>LinkUrl”, $(this)).text();
var description = $(“Description”, $(this)).text()

html +=
“<div class=’quickSearchResultDivUnselected’ style=’width:” + divWidh + “px;max-width:” + divWidh + “px; color: #000; margin: 2px 0; font-size:13px; font-weight: normal;’> \
<a href='” + url + “‘ style=’color: #004489; font-weight: bold; text-decoration: none; border-bottom: 1px solid #ccc; padding: 3px 0; display: block;’>” + $(“Title”, $(this)).text() + “</a> \
<div style=’display:none’ id=’details’ style=’margin-left:10px’>”
+ description +
“<br/>” + url + ” \
</div> \
</div>”;
});
if (x.find(“TotalAvailable”).text() != “”)
html += “<div style=’text-align:right; padding: 0 3px 3px 3px; margin: 0 2px; color: #e0001a; font-size:13px; font-weight: bold;’>Risultati Totali: ” + x.find(“TotalAvailable”).text() + “</div>”;
else
html += “<div style=’text-align:right; padding: 0 3px 3px 3px; margin: 0 2px; color: #e0001a; font-size:13px; font-weight: bold;’>Risultati Totali: 0</div>”;
});

//$(“#quickSearchResults”).empty().append(html);
showResultsDiv(“<div style=’color: #e0001a; font-weight: bold; font-size: 14px; border-bottom: 1px solid #999; padding-top: 10px;’>Contenuti</div>”);
$(“#quickSearchResults”).append(html);
$(“#quickSearchResults>div>a”).hover(
function () { selectDiv($(this).parent()); },
function () { unSelectDiv($(this).parent()); }
);
showResultsDiv();
}
}
function peoplesearch(query) {
if (($(‘.search > #sTabs > .acTab’).attr(‘tab’) == “All”) || ($(‘.search > #sTabs > .acTab’).attr(‘tab’) == “People”)) {
quickSearchSelectedDivIndex = -1;

var queryXML = ‘<QueryPacket Revision=”1000″> \
<Query> \
<Context> \
<QueryText language=”en-US” type=”string”>scope:”‘ + quickSearchConfig.scopepeople + ‘” ‘ + query + ‘*</QueryText> \
</Context> \
<SupportedFormats Format=”urn:Microsoft.Search.Response.Document.Document” /> \
<ResultProvider>SharepointSearch</ResultProvider> \
<Range> \
<StartAt>1</StartAt> \
<Count>’ + quickSearchConfig.numberOfResults + ‘</Count> \
</Range> \
<EnableStemming>true</EnableStemming> \
<EnableSpellCheck>Suggest</EnableSpellCheck> \
<IncludeSpecialTermsResults>true</IncludeSpecialTermsResults> \
<IncludeRelevantResults>true</IncludeRelevantResults> \
<ImplicitAndBehavior>true</ImplicitAndBehavior> \
<TrimDuplicates>true</TrimDuplicates> \
<Properties> \
<Property name=”Rank” /> \
<Property name=”Title” /> \
<Property name=”Author” /> \
<Property name=”Size” /> \
<Property name=”Path” /> \
<Property name=”Write” /> \
<Property name=”HitHighlightedSummary” /> \
<Property name=”HitHighlightedProperties” /> \
<Property name=”PictureURL” /> \
</Properties> \
</Query> \
</QueryPacket>’;
var soapEnv =
“<soap:Envelope xmlns:xsi=’http://www.w3.org/2001/XMLSchema-instance&#8217; xmlns:xsd=’http://www.w3.org/2001/XMLSchema&#8217; xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soap:Body> \
<Query xmlns=’urn:Microsoft.Search’> \
<queryXml>” + escapeHTML(queryXML) + “</queryXml> \
</Query> \
</soap:Body> \
</soap:Envelope>”;

$.ajax({
//async: “false”,
url: “/_vti_bin/search.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\””
});
}

function processResult(xData, status) {
var html = “”;

$(xData.responseXML).find(“QueryResult”).each(function () {
var divWidh = $(“#quickSearchTable”).width() – 13;
html += “<div class=’quickSearchResultDivUnselected’ style=’width:\” + divWidh + \”px; max-width:\” + divWidh +\”px; font-size: 13px; font-weight: bold;’>”;
var x = $(“<xml>” + $(this).text() + “</xml>”);
x.find(“Document”).each(function () {
var url = $(“Action>LinkUrl”, $(this)).text();
var noFoto = “0”;
$(“Properties > Property”, $(this)).each(function () {
if ($(this).find(“Name”).text() == “Title”) {
var val = $(this).find(“Value”).text();
html += “<div class=’quickSearchResultDivUnselected’ style=’width:\” + divWidh + \”px; max-width:\” + divWidh +\”px; font-size: 13px; font-weight: bold;’>”;
html += “<div class =\”titolo\” style=\”margin: 6px 0; color: #004489; font-size: 13px; font-weight: bold;\”>” + val + “</div>”

}
if ($(this).find(“Name”).text() == “PictureURL”) {
noFoto = “1”;
var foto = $(this).find(“Value”).text();
html += “<div class=’quickSearchResultDivUnselected’ style=’width:\” + divWidh + \”px; max-width:\” + divWidh +\”px; font-size: 13px; font-weight: bold;’>”;
html += “<div class =’titolo’><a href='” + url + “‘ style=’display: block; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px !important; font-size: 13px;’><img src='” + foto + “‘ /></a></div>”;

}
});
if (noFoto == “0”) {

html += “<div class=’quickSearchResultDivUnselected’ style=’width:\” + divWidh + \”px; max-width:\” + divWidh +\”px; font-size: 13px; font-weight: bold;’>”;
html += “<div class =’titolo’><a href='” + url + “‘ style=’display: block; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px !important; font-size: 13px;’><img src=’/_layouts/images/O14_person_placeHolder_42.png’ /></a></div>”;

}

html += “</div>”;
html += “</div>”;

});
if (x.find(“TotalAvailable”).text() != “”)
html += “<div style=’text-align:right; padding: 0 3px 3px 3px; margin: 0 2px; color: #e0001a; font-size: 13px; font-weight: bold;’>Risultati Totali: ” + x.find(“TotalAvailable”).text() + “</div>”;
else
html += “<div style=’text-align:right; padding: 0 3px 3px 3px; margin: 0 2px; color: #e0001a; font-size: 13px; font-weight: bold;’>Risultati Totali: 0</div>”;
});

//$(“#quickSearchResults”).empty().append(html);
showResultsDiv(“<div style=’color: #e0001a; font-weight: bold; font-size: 14px; border-bottom: 1px solid #999; padding-top: 10px;’>Persone</div>”);
$(“#quickSearchResults”).append(html);
$(“#quickSearchResults>div>a”).hover(
function () { selectDiv($(this).parent()); },
function () { unSelectDiv($(this).parent()); }
);
showResultsDiv();
}
}

function escapeHTML(str) {
return str.replace(/&/g, ‘&amp;’).replace(/</g, ‘&lt;’).replace(/>/g, ‘&gt;’);
}

Aperto ad ogni consiglio e miglioramento 🙂 !! Cià
Annunci

Informazioni su matteolenzo

Fast Search for Sharepoint 2010 Junior developer/consultant

Discussione

Non c'è ancora nessun commento.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: