Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding AngularJS search in Jekyll blog
{% if page.title == 'Search'%}
<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script type="text/javascript" src="/js/JekyllApp.js"></script>
{% endif %}
/**
* Setup Module with `highlight` filter
*/
var JekyllApp = angular.module('JekyllApp', [], function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
});
JekyllApp.filter('highlight', function () {
return function (text, filter) {
if (filter === '') {
return text;
}
else {
return text.replace(new RegExp(filter, 'gi'), '<span class="match">$&</span>');
}
};
});
/**
* Inject required $objects into our Controller
*/
JekyllSearchController.$inject = ['$scope', '$location', '$window'];
function JekyllSearchController($scope, $location, $window) {
// Optionally passing in a search term via q=XXX
// $location.search won't work without html5Mode false using window.location.search instead
// $scope.searchText = $location.search().q || "";
// Todo: Consider switching back to $location.search once it supports html5Mode false
$scope.searchText = '';
var search = window.location.search;
if (search.indexOf('?q=') > -1 || search.indexOf('&q=') > -1) {
var params = {};
angular.forEach(search.split('?')[1].split('&'), function (param) {
params[param.split('=')[0]] = param.split('=')[1];
});
$scope.searchText = params.q || '';
}
$scope.externalLink = function () {
// Todo: Figure out the correct AngularJS way for a page reload on href click
// https://github.com/angular/angular.js/issues/1102
$window.location.href = this.post.url;
};
$scope.posts = JekyllApp.posts;
}
[{% for post in site.posts %}
{"title" : "{{ post.title }}", "url" : "{{ post.url }}","date" : "{{ post.date | date_to_string }}",
"content" : "{{ post.content | strip_html | truncate : 120 }}"}{% if forloop.rindex0 != 0 %},{% endif %}{% endfor %}
];
---
layout: page
title: Search
header: Search
group: navigation
---
{% include JB/setup %}
<script type="text/javascript">
// Using liquid to populate JeykllApp.posts array
JekyllApp.posts = {% include Helper/JekyllAppPosts %}
</script>
<div id="search-container" class="entrance" ng-app="JekyllApp" ng-controller="JekyllSearchController">
<div class="entrance-item">
<p><input id="searchText" type="search" placeholder="Live Search Posts..." ng-model-instant ng-model="searchText" />
</div>
<div class="entrance-item">
<ul>
<li ng-repeat="post in posts | filter:searchText">
<span ng-bind-html-unsafe="post.date | date:'MMM d, y' | highlight:searchText"></span> &raquo;
<a ng-href="{{ '{{ post.url ' }}}}" ng-click="externalLink()"
ng-bind-html-unsafe="post.title | highlight:searchText"></a>
<div class="preview" ng-bind-html-unsafe="post.content | highlight:searchText"></div>
</li>
</ul>
</div>
</div>
@russmatney

This comment has been minimized.

russmatney commented Sep 2, 2013

This was super helpful, thank you so much for this.

One note: i was building the json object in-line in the html, and my content was throwing errors and breaking the json – i added a strip_newlines after the strip_html and the browser was happy again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment