Commit e0efbb85 authored by Guillaume Royer's avatar Guillaume Royer

feat(elasticlunr): add live example search on indexeddb

parent 3e48377d
......@@ -56,7 +56,7 @@
}
}
});
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
this.documents = {};
......
<html>
<head>
<title></title>
<script src="https://rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js" type="text/javascript"></script>
<script type="text/javascript" src="../../external/rsvp-2.0.4.js"></script>
<script type="text/javascript" src="../../dist/jio-latest.js"></script>
<style type="text/css" media="screen">
#results,
#create-status,
#search-status {
display: none;
}
</style>
</head>
<body>
<h1>Search documents in IndexedDB</h1>
<p>Index with engine:</p>
<select id="index-select">
<option value="elasticlunr" selected="true">Elasticlunr</option>
<option value="sql" disabled="true">SQL</option>
</select>
<p>Step 1: create random documents</p>
<span>Number: </span>
<input type="number" id="doc_count" placeholder="How many documents to create?" value="1000">
<button type="button" id="create" onclick="javascript:window.create()">Create</button>
<span id="create-status">Creating documents... <span id="create-count"></span></span>
<p>Step 2: search documents by title (do not include "%"):</p>
<span>Title: </span>
<input type="text" id="query">
<span id="search-status">Searching documents...</span>
<br />
<br />
<button type="button" id="search-index" onclick="javascript:window.searchWithIndex()">Search using Index</button>
<br />
<button type="button" id="search-query" onclick="javascript:window.searchWithQuery()">Search using Query</button>
<div id="results">
<h2><span id="result-count"></span> results found in <span id="result-time"></span> seconds</h2>
<table id="results-list">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<!-- <th>Description</th> -->
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="./indexeddb-search.js"></script>
</body>
</html>
/*jslint nomen: true, maxlen: 100*/
/*global jIO, faker*/
(function (jIO, faker) {
var storage = null,
createStatus = document.getElementById('create-status'),
createCount = document.getElementById('create-count'),
createButton = document.getElementById('create'),
queryInput = document.getElementById('query'),
indexSelect = document.getElementById('index-select'),
searchIndexButton = document.getElementById('search-index'),
searchQueryButton = document.getElementById('search-query'),
searchStatus = document.getElementById('search-status'),
searchResults = document.getElementById('results'),
searchResultsList = document.getElementById('results-list').getElementsByTagName('tbody')[0],
searchResultCount = document.getElementById('result-count'),
searchResultTime = document.getElementById('result-time');
function initIndexStorage() {
var type = indexSelect.options[indexSelect.selectedIndex].value;
storage = jIO.createJIO({
type: type,
index_fields: ['title', 'description'],
index_sub_storage: {
type: 'indexeddb',
database: 'jio_examples_' + type + '_indexeddb'
},
sub_storage: {
type: 'indexeddb',
database: 'jio_examples_indexeddb'
}
});
}
function initQueryStorage() {
storage = jIO.createJIO({
type: 'query',
sub_storage: {
type: 'indexeddb',
database: 'jio_examples_indexeddb'
}
});
}
function createRecursiveDoc(max) {
var count = parseInt(createCount.textContent, 10);
if (count < max) {
return storage.put(faker.random.uuid(), {
title: faker.name.title(),
description: faker.lorem.words()
}).then(function () {
createCount.textContent = count + 1;
return createRecursiveDoc(max);
});
}
}
function searchDocs(query) {
return storage.allDocs({
query: 'title: "' + query + '"'
});
}
function addCell(row, content) {
row.insertCell(0).appendChild(document.createTextNode(content));
}
window.create = function () {
createButton.style.display = 'none';
createStatus.style.display = 'inline';
searchIndexButton.disabled = true;
searchQueryButton.disabled = true;
createCount.textContent = 0;
initIndexStorage();
var count = parseInt(document.getElementById('doc_count').value);
createRecursiveDoc(count).then(function () {
createButton.style.display = 'inline';
createStatus.style.display = 'none';
searchIndexButton.disabled = false;
searchQueryButton.disabled = false;
}, function (error) {
console.error(error);
});
};
function insertResult(id, data) {
var row = searchResultsList.insertRow(searchResultsList.rows.length);
// addCell(row, data.description);
addCell(row, data.title);
addCell(row, id);
}
function search(query) {
var now = new Date();
searchStatus.style.display = 'inline';
searchResults.style.display = 'none';
createButton.disabled = true;
searchIndexButton.disabled = true;
searchQueryButton.disabled = true;
searchDocs(query).then(function (result) {
searchStatus.style.display = 'none';
searchResults.style.display = 'block';
createButton.disabled = false;
searchIndexButton.disabled = false;
searchQueryButton.disabled = false;
searchResultCount.textContent = result.data.total_rows;
searchResultTime.textContent = (new Date().getTime() - now.getTime()) / 1000;
// fetch each result to display document values (without using filtering on ids)
setTimeout(function () {
searchResultsList.innerHTML = '';
// TODO: is there a way to cancel the promises when a new search is done?
// otherwise searching while still getting past results will append them to new ones
result.data.rows.map(function (row) {
var id = row.id;
if (Object.keys(row.value).length) {
insertResult(id, row.value);
return;
}
return storage.get(id).then(function (data) {
insertResult(id, data);
});
});
});
}, function (error) {
console.error(error);
});
}
window.searchWithIndex = function () {
var query = queryInput.value;
initIndexStorage();
search(query);
};
window.searchWithQuery = function () {
var query = queryInput.value;
initQueryStorage();
search('%' + query + '%');
};
}(jIO, faker));
......@@ -171,10 +171,11 @@
});
};
ElasticlunrStorage.prototype._resetIndex = function (id, indexFields) {
this._index_id = 'id';
ElasticlunrStorage.prototype._resetIndex = function (indexFields) {
if (indexFields) {
this._index_fields = indexFields;
this._index = initIndex(id, indexFields);
}
this._index = initIndex(this._index_id, this._index_fields);
};
ElasticlunrStorage.prototype._saveIndex = function () {
......
......@@ -743,7 +743,7 @@
expect(2);
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......@@ -792,7 +792,7 @@
stop();
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......@@ -844,7 +844,7 @@
stop();
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title", "subtitle"
]);
indexDocuments(this.jio, [{
......@@ -896,7 +896,7 @@
stop();
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title", "subtitle"
]);
indexDocuments(this.jio, [{
......@@ -955,7 +955,7 @@
expect(2);
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......@@ -1003,7 +1003,7 @@
expect(1);
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......@@ -1064,7 +1064,7 @@
expect(2);
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......@@ -1119,7 +1119,7 @@
expect(2);
// index documents to execute query
this.jio.__storage._resetIndex("id", [
this.jio.__storage._resetIndex([
"title"
]);
indexDocuments(this.jio, [{
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment