Skip to content

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.

Copy link

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
You can’t perform that action at this time.