Page Comparison

Info
Ajaxfrancelabs is deprecated as of Datafari v6.0 aside from specific admin and search expert functionalities. Please refer to DatafariUI for any search UI related task.

This demonstration is an introduction to the framework AjaxFranceLabs and will demonstrate how to use it.

In order to do that, you will need to download the AjaxFranceLabs framework and include it to your workspace.

Here are the first steps:

Download the latest update of the version 1 of jQuery on jQuery's website
Create a main.js file where we will add all our code to create the interface
Include this two JavaScript files to the html page
Include the main.css file, the result.css from the framework and the font awesome library as bellow.

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,

...

The display should look like something like this:Image Removed

...

Well, now it would be good to show some results. Lets add the ResultWidget!

In the html file

Code Block

language	xml

<!-- index.html - Adding a Result 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>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- The ResultWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.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 class="col left"></div>
      <div class="col right">
    <div id="results"></div><!-- the widget will be inserted here -->
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

And the javascript file:

Code Block

language	xml

/* 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:Image Removed

...

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.

The html file

Code Block

language	xml

<!-- index.html - Adding a SearchInformation 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>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <!-- The SearchInformationWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
       <div id="searchBar"></div>
       <div id="result_information"></div><!-- the widget will be inserted here -->
       <div class="col left"></div>
       <div class="col right">
    	   <div id="results"></div>
       </div>
       <div class="clear"></div>
    </div>
  </body>
</html>

...

Code Block

language	xml

/* searchTutorial.js */
$(function($){
    
    Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
        elm: $('#searchBar'),
        id: 'searchBar'
    }));

    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);
                }
            }
        }
    }));
    
    /* The SearchInformation widget */
    Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
        elm: $('#result_information'),
        id: 'searchInformation'
    }));
    
    Manager.makeRequest();      
});

You should get the following display:Image Removed

...

For this part of the tutorial, we will continue by adding the pagination feature.

The html file:

Code Block

language	xml

<!-- index.html - Adding the pagination  -->
<!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>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <!-- Add this class -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- Add this module -->
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <!-- The SearchInformationWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div>
      <div id="result_information"></div> <!-- the widget will be inserted here -->
      <div class="col left"></div>
      <div class="col right">
    <div id="results"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

And the javascript file

Code Block

language	xml

/* searchTutorial.js */
$(function($){

Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
    elm: $('#searchBar'),
    id: 'searchBar'
}));
/* The result widget */
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
    elm: $('#results'),
    id: 'documents',
    pagination : true, /* Add this */
    afterRequest : function() {
        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);
            }
        }
    }
}));


Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
    elm: $('#result_information'),
    id: 'searchInformation'
}));

Manager.makeRequest();      
});

You should get the following result:Image Removed

...

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.

The autocomplete widget is a direct extension of the autocomplete plugin from jQuery UI, so we will need to download it and include it to our javascript files.

Code Block

language	xml

<!-- index.html - Adding the autocomplete functionnality -->
<!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>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- Add this module -->
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Autocomplete.module.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div>
      <div id="result_information"></div><!-- the widget will be inserted here -->
      <div class="col left"></div>
      <div class="col right">
    <div id="results"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

And the javascript file

Code Block

language	xml

/* searchTutorial.js */
$(function($){
    
    Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
        elm: $('#searchBar'),
        id: 'searchBar',
        autocomplete : true //add this line for the autocompletion
    }));
    
    Manager.addWidget(new AjaxFranceLabs.ResultWidget({
        elm: $('#results'),
        id: 'documents',
        pagination : true, 
        afterRequest : function() {
            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);
                }
            }
        }
    }));
    
    
    Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
        elm: $('#result_information'),
        id: 'searchInformation'
    }));
    
    Manager.makeRequest();      
    

});

You should get the following:Image Removed

...

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.

Lets go a bit further now and add faceting.

The html file

Code Block

language	xml

<!-- index.html - Adding some facets -->
<!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>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- Add this class which our widget extends -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractFacetWidget.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Autocomplete.module.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <!-- Add this widget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/Table.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div>
      <div id="result_information"></div>
      <div class="col left">
    <!-- Add this block -->
    <div id="facets">
      <div id="facet_langue"></div><!-- First widget -->
      <div id="facet_source"></div><!-- Second widget -->
    </div>
      </div>
      <div class="col right">
    <div id="results"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

And the javascript file:

Code Block

language	xml

/* searchTutorial.js */
$(function($){
    
    Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
        elm: $('#searchBar'),
        id: 'searchBar',
        autocomplete : true //add this line for the autocompletion
    }));
    
    Manager.addWidget(new AjaxFranceLabs.ResultWidget({
        elm: $('#results'),
        id: 'documents',
        pagination : true, 
        afterRequest : function() {
            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);
                }
            }
        }
    }));
    
    
    Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
        elm: $('#result_information'),
        id: 'searchInformation'
    }));
    
    Manager.addWidget(new AjaxFranceLabs.TableWidget({
        elm : $('#facet_langue'),
        id : 'facet_langue',
        field : 'language',
        name : window.i18n.msgStore['language'],
        pagination : true,
        selectionType : 'OR',
        returnUnselectedFacetValues : true
    }));
    
Manager.addWidget(new AjaxFranceLabs.TableWidget({
        elm : $('#facet_source'),
        id : 'facet_source',
        field : 'source',
        name : window.i18n.msgStore['source'],
        pagination : true,
        selectionType : 'OR',
        returnUnselectedFacetValues : true
    }));
    
    Manager.makeRequest();      

});

You should get the following:Image Removed

...

Versions Compared

Old Version 5

New Version Current

Key

This demonstration is an introduction to the framework AjaxFranceLabs and will demonstrate how to use it.

Well, now it would be good to show some results. Lets add the ResultWidget!

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.

For this part of the tutorial, we will continue by adding the pagination feature.

The next thing we will do is including the autocomplete widget to the search bar.

Lets go a bit further now and add faceting.