Scroll

Search function for Tablets

Follow
Summary This article describes how to embed a database in the client side and then execute the search locally through Javascript in askiadesign.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords database; search; script; javascript; jQuery; JSON; design; askiadesign

Download the example qex file

Table of contents:

Search function for Tablets

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

As solution, the goal will be to embed the database in 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 use 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 of object, that mean that each item in the array represent 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 that: {cp : "01000", com : "SAINT-DENIS-LES-BOURG", pa : 4}

Create the JSON:
In order to convert the database (here an Excel file) to the 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 break lines are used for visibility):

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

Minify the JSON:
Because the JSON could be quite large, we have to optimize the JSON by compressing it (minify). You could use an online tools to do that (http://jscompress.com/ for example).

Create 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 Design.

a) Questions and screens

All Javascript are 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 Design to hold the selected data.
Here we use 2 open-ended questions and 1 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 into 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 trigger each time the user enter something into the input of the postal code. It uses a regular expression to validate that the code enter is conform to the postal code (5 digits) and then use a dichotomic search algorithm to display all cities which matches the postal code.
  • onSelect(e): This function is trigger each time the user select something into the virtual dropdown. It use the data associated with the selected cities and complete 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 do a dichotomic search. It's a recursive function which returns an array with all found data. For performance reason, there is an internal cache system which keep in memory all searches. 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 contains more than one record, it creates a placeholder to invite user to select something. If the results contains exactly one record, it select it automatically. For performance reason, there is an internal cache system which keep in memory all searches. 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.

The latest function init() is use to initialized the results if you go back to the page (it mimic 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)

Have more questions? Submit a request

Comments