Skip to content

jio_mebibou
jio_mebibou
Commit 3e48377d authored by Guillaume Royer's avatar Guillaume Royer
Browse files
Options

feat(elasticlunr): add live example search on dropbox

parent 5b79e0e6
Show whitespace changes
Inline Side-by-side
Showing with 223 additions and 0 deletions
examples/elasticlunr/dropbox-search.html 0 → 100644
View file @ 3e48377d
<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">
#access_token {
width: 500px;
}
#results,
#create-status,
#search-status {
display: none;
}
</style>
</head>
<body>
<h1>Search documents in Dropbox</h1>
<p>Your dropbox access token (required):</p>
<input type="text" id="access_token" value="">
<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="./dropbox-search.js"></script>
</body>
</html>
examples/elasticlunr/dropbox-search.js 0 → 100644
View file @ 3e48377d
/*jslint nomen: true, maxlen: 100*/
/*global jIO, faker*/
(function (jIO, faker) {
var storage = null,
accessToken = document.getElementById('access_token'),
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 getAccessToken() {
return accessToken.value;
}
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 + '_dropbox'
},
sub_storage: {
type: 'drivetojiomapping',
sub_storage: {
type: 'dropbox',
access_token: getAccessToken()
}
}
});
}
function initQueryStorage() {
storage = jIO.createJIO({
type: 'query',
sub_storage: {
type: 'drivetojiomapping',
sub_storage: {
type: 'dropbox',
access_token: getAccessToken()
}
}
});
}
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));
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7