Download the example QEX file

Search function for tablets

While doing an iOS or Android survey (could also be the case for CAWI surveys), the internet connection is sometimes too low or not accessible. Running an AJAX query to search for information from an external database is also problematic using this kind of environment.

For the solution, the goal will be to embed the database on the client side and then execute the search locally through JavaScript.

How to:
In the following example, we will search for all cities associated with a postal code.
The first important thing is to have everything sorted into an ascending order, as the JavaScript uses a dichotomic algorithm to perform a faster research (http://en.wikipedia.org/wiki/Dichotomic_search).

Step 1

Convert the database into JSON format.
Explanation:
That JSON format is an array object, which means that each item in the array represents a record.
Each record should have the attributes (fields), in our case:

• cp: French postal code
• com: French city
• pa: French code for the PA area

The JSON looks like this: [{ item 1 }, { item 2 }, { item 3 } …];
With data, it will look like this: {cp : "01000", com : "SAINT-DENIS-LES-BOURG", pa : 4}

Create the JSON:
In order to convert the database (here an Excel file) to JSON you can use the following website: http://shancarter.com/data_converter/
Use the output as "JSON - Properties".

Declare a variable named "database" associated with the JSON output: var database = [JSON] ;
The final output should look like that (spaces and line breaks are used for visibility):

var database = [
{cp : "XXXXX", com : "XXX XXX XXX", pa : X}, 
{cp : "YYYYY", com : "YYY YYY YYY", pa : Y}
];

Minimise the JSON:
Because the JSON could be quite large, we have to optimize the JSON by compressing it. You could use online tools to do that (http://jscompress.com/ for example).
Create the file . . .
Open notepad, copy the minify JSON and saved that file with the .js extension - "zones-min.js" in our case.

Step 2

Integrate the database and the search algorithm into AskiaDesign.

a) Questions and screens

JavaScript is based on jQuery for convenience. So you need to integrate it in the header of your surveys and in the resources' tab:

<script src="??ResPath??jquery.js"></script>

Create questions in AskiaDesign to hold the selected data.
Here we use two open-ended questions and one numeric question.
You could also use closed questions when the number of possible responses is fixed.
The first question "codepostal" is the only one visible at the end. It is use for the end-user to enter the postal code (numerical only and having 5 digits).
All other questions are on the same screen and should be hidden using the style="display:none" attributes in the code in TR (for label) and code in controls for inputs.

For each controls also put an unique identifier using id="xxx" in the code in controls. id="cp", id="comhidden", id="pa"

For the cities, we have created a virtual dropdown to display the list of cities:
<select id="com"></select>
("Code after" in the city input)

b) Javascript
In a label place your JSON database using . . .

<script src="??ResPath??zones-min.js"></script>

In the same label also place a JavaScript file which will perform the search:

<script src="??ResPath??search.js"></script>

This latest script contains two main function:

• onKeyup(e): This function is triggered each time the user enters something into the input of the postal code. It uses a regular expression to validate that the code enter conforms to the postal code (5 digits) and then uses a dichotomic search algorithm to display all of the cities that match the postal code.
• onSelect(e): This function is triggered each time the user selects something from the virtual dropdown. It uses the data associated with the selected cities and completes the two hidden fields with the information ("comhidden" with "com" field and "pa" with "pa" field).

Two helper functions are used:

• dichotomic(data, cp): This function does a dichotomic search. It's a recursive function that returns an array with all found data. For performance reasons, there is an internal cache system which keeps all searches in memory. If you enter the 12345 the first time, the search is done through the database and the results are put in cache. If you enter the same postal code it uses the cache directly.
• updateDropDown(): This function creates options for the dropdown using the results of the search. If the results contain more than one record, it creates a placeholder to invite the user to select something. If the results contain exactly one record, it selects it automatically. For performance reasons, there is an internal cache system that keeps all searches in memory. If you enter the 12345 the first time, the search is done through the database and the results are put into cache. If you enter the same postal code it uses the cache directly.

The latest function init() is used to initialize the results if you go back to the page (it mimics the selections according to the value of all inputs).

Fonction de recherche pour tablettes

En faisant des enquêtes sur iOS ou Android (peut-être aussi le cas pour les enquêtes CAWI), la connexion internet est parfois trop faible ou n'est pas accessible. L'exécution d'une requête AJAX pour rechercher une information dans une base de données externe est également parfois problématique dans ce genre d'environnement.

La solution serait d'intégrer la base de données côté client, puis exécuter la recherche localement par Javascript.

Comment faire:
Dans l'exemple suivant, nous allons rechercher toutes les villes associées à un code postal.
La première chose importante, c'est d'avoir tout triés dans un ordre croissant comme le Javascript utilise un algorithme dichotomique pour effectuer une recherche rapide

(http://en.wikipedia.org/wiki/Dichotomic_search)

Etape 1

Convertir la base de données au format JSON.

Explication:
Ce format JSON est un tableau d'objet, cela signifie que chaque élément du tableau représente un enregistrement.
Chaque enregistrement doit avoir les attributs (texte), dans notre cas:

• cp: code postal français
• com: ville française
• pa: code français de la zone PA

Le JSON ressemble à ceci: [{item 1}, {item 2}, {3} article ...];
Avec les données, il ressemblera à ce qui suit: {cp: "01000", com: "SAINT-DENIS-LES-BOURG", pa: 4}

Créez le JSON:
Afin de convertir la base de données (ici un fichier Excel) au format JSON, vous pouvez utiliser le site Web suivant:
http://shancarter.com/data_converter/
Utilisez la sortie de "JSON - Propriétés"

Déclarez une variable nommée "base de données" associé à la sortie JSON:
var = base de données [JSON];
Le résultat final devrait ressembler à ce qui suit (les espaces et les lignes de rupture sont utilisés pour la visibilité):

var base de données = [
{cp: "XXXXX", com: "XXX XXX XXX", pa: X},
{cp: "YYYYY", com: "YYY YYY YYY», pa: Y}
];

Simplifier le JSON:
Parce que le JSON peut être assez important, vous pouvez l'optimiser en comprimant celui-ci (diminuer). Vous pouvez utiliser des outils en ligne pour le faire (http://jscompress.com/ par exemple).

Créer un fichier
Ouvrir bloc-notes, copiez le JSON comprimer et enregistrez ce fichier avec l'extension ".js".
"Zones-min.js" dans notre cas.

Etape 2

Intégrer la base de données et l'algorithme de recherche en design.

a) Les questions et les écrans

Tout Javascript est basé sur jQuery pour plus de commodité. Vous avez donc besoin de l'intégrer dans l'en-tête de vos enquêtes et dans l'onglet des ressources :

<script src="??ResPath??jquery.js">

Créer les questions qui vont contenir les données sélectionnées.
Ici, nous utilisons 2 questions ouvertes et 1 question numérique.
Vous pouvez également utiliser des questions fermées lorsque le nombre de réponses possibles est fixe.
La première question "codepostal" est le seul visible à la fin. Il est utiliser par l'utilisateur final afin d'entrer le code postal (chiffres uniquement et disposant de 5 chiffres).
Toutes les autres questions sont dans le même écran et doivent être cachées en utilisant (style="display:none") comme attributs dans le code de TR (par étiquette) et le code de contrôle pour les entrées.

Pour chaque contrôle aussi mettre un identifiant unique à l'aide id = "xxx" dans le code de contrôle.
id = "cp", id = "comhidden", id = "pa"

Pour les villes, nous avons créé une liste déroulante pour afficher la liste des villes:
<select id="com">
(Le "Code après" dans l'entrée ville)

b) Javascript

Dans une étiquette, insérer la référence à votre base de données JSON en utilisant

<script src="??ResPath??zones-min.js">

Dans le même label placer un fichier javascript qui va effectuer la recherche:

<script src="??ResPath??search.js">

Ce dernier script contient deux fonctions principales:

• Onkeyup (e): Cette fonction est de déclenché à chaque fois que l'utilisateur entre quelque chose dans le champ du code postal. Il utilise une expression régulière pour valider que le code entré est conforme au code postal (5 chiffres), puis utiliser un algorithme de recherche dichotomique pour afficher toutes les villes qui correspond le code postal.
• OnSelect (e): Cette fonction est de déclencher à chaque fois que l'utilisateur sélectionne quelque chose dans la liste déroulante virtuel. Il utilise les données associées aux villes choisies et remplir les deux champs cachés de l'information ("comhidden" par "com" sur le terrain et «pa» par «pa» sur le terrain)

Deux fonctions auxiliaires sont utilisées:

• Dichotomic (données, cp): Cette fonction effectue une recherche dichotomique. Il s'agit d'une fonction récursive qui retourne un tableau avec toutes les données trouvées. Pour des raisons de performance, il ya un système de cache interne qui garde en mémoire toutes les recherches. Si vous entrez dans le champ 12345 la première fois, la recherche est effectuée dans la base de données et les résultats sont mis en cache. Si vous entrez le même code postal, il utilise le cache directement.
• UpdateDropDown (): Cette fonction créée des options pour la liste déroulante en utilisant les résultats de la recherche. Si les résultats contiennent plus d'un enregistrement, il crée un espace réservé pour inviter l'utilisateur à sélectionner quelque chose. Si les résultats contiennent exactement un enregistrement, il le sélectionne automatiquement. Pour des raisons de performance, il y a un système de cache interne qui garde en mémoire toutes les recherches. Si vous entrez dans le 12345 la première fois, la recherche est effectuée dans la base de données et les résultats sont mis en cache. Si vous entrez le même code postal, il utilise le cache directement.

La dernière fonction init () est utilisée pour initialiser les résultats si vous retournez à la page (il initie les sélections en fonction de la valeur de toutes les entrées)