...
In a first place, we will create the AjaxFranceLabs manager, configure it and include the searchBar widget which will allow us to process searches using keywords.
We are going to include the required files as well as their dependencies,
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding a SearchBar widget -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<!-- The framework main file -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<!-- Required file for the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<!-- Required file for the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<!-- The abstract manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<!-- An implementation of the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<!-- The AbstractWidget file -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<!-- The SearchBar widget, implementing AbstractWidget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div><!-- the widget will be inserted here -->
</div>
</body>
</html> |
Now let's create the main.js file .
| Code Block | ||
|---|---|---|
| ||
/* main.js */
$(function($){
/* Now, we had the widget to the manager */
//Version 1 - if you do not need to have a variable refering to the widget
Manager.addWidget(
new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
})
);
//Version 2
var searchBarWidget = new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
});
Manager.addWidget(searchBarWidget);
/* And we initialize the manager */
Manager.init();
}); |
The display should look like something like this:
Well, now it would be good to show some results. Lets add the ResultWidget!
...
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
}));
/* The result widget */
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
afterRequest : function() { /* implements the method displaying the documents */
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
/* Lets simulate an empty search query in order to fill the results when loading the page */
/* The makeRequest method actually initializes the manager if this has not been done before */
Manager.makeRequest();
});
|
...
You should get the following result:
Now we have our search bar and the results displayed, why not adding the search informations like the number of documents returned, the query execution time. Lets add the SearchInformation widget.
...
You should get the following display:
For this part of the tutorial, we will continue by adding the pagination feature.
...
You should get the following result:
Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.
The next thing we will do is including the autocomplete widget to the search bar.
...
You should get the following:
Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.
...