I have a working search box and wanted to add autocomplete functionality. It keeps displaying "No search results."
When I type the word "Umbraco" into the input, I do see the following in the console, but it's not autocompleting:
[{"id":"http://localhost:33968/explore/our-umbraco/","label":"Our Umbraco","value":"Our Umbraco"},{"id" :"http://localhost:33968/extend/umbraco-forms/","label":"Umbraco Forms","value":"Umbraco Forms"}]
HTML
<form method="post" action="/results">
<input type="text" id="searchTerm" name="searchTerm" size="21" maxlength="120">
<input type="submit" value="Search">
</form>
autocomplete.js
$(function() {
$( "#searchTerm" ).autocomplete({
source: "/SearchJSON",
minLength: 2,
select: function (event, ui) {
//Redirect user when item selected from the id in the JSON
window.location.href = ui.item.id;
}
});
});
Search_JSON.cshtml
@using Examine
@using Examine.SearchCriteria
@using System.Web.Script.Serialization
@{
//Get the domain (http://localhost:6436)
var siteURL = "http://" + Request.Url.Authority;
//Get the values posted from the form
var searchTerm = Request["term"];
//Check if searchTerm is null from the posted form data...
if (String.IsNullOrEmpty(searchTerm))
{
//Stop all other code running in this Macro
return;
}
var searcher = ExamineManager.Instance.SearchProviderCollection["RazorSiteSearcher"];
var searchCriteria = searcher.CreateSearchCriteria(BooleanOperation.Or);
var query = searchCriteria.GroupedOr(new string[] { "nodeName", "bodyText" }, searchTerm).Compile();
var searchResults = searcher.Search(query);
/*
EXAMPLE JSON
[{ "id": "http://localhost/about.aspx", "label": "About", "value": "About" }]
*/
List<dynamic> searchResultKeyVals = new List<dynamic>();
//Convert the search results as JSON
foreach(var result in searchResults)
{
searchResultKeyVals.Add(new {
id = siteURL + umbraco.library.NiceUrl(result.Id),
label = result.Fields["nodeName"],
value = result.Fields["nodeName"]
});
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
var JSONResults = serializer.Serialize(searchResultKeyVals);
}
@* Ouput the JSON *@
@Html.Raw(JSONResults)
Search_Results.cshtml
@using Examine
@using Examine.SearchCriteria
@{
//Get the values posted from the form
var searchTerm = Request.Form["searchTerm"];
//Check if searchQuery is null from the posted form data...
if (searchTerm == null)
{
//If it is null then the form was not posted and the page was visited directly
<p>Please use the search box</p>
//Stop all other code running in this Macro
return;
}
var searcher = ExamineManager.Instance.SearchProviderCollection["RazorSiteSearcher"];
var searchCriteria = searcher.CreateSearchCriteria(BooleanOperation.Or);
var query = searchCriteria.GroupedOr(new string[] { "nodeName", "bodyText" }, searchTerm).Compile();
var searchResults = searcher.Search(query);
var noResults = searchResults.Count();
<p>You searched for @searchTerm, and found @noResults results</p>
<ul class="search-results">
@foreach (var result in searchResults)
{
<li>
<a href="@umbraco.library.NiceUrl(result.Id)">@result.Fields["nodeName"]</a>
</li>
}
</ul>
}
