Skip to content

Instantly share code, notes, and snippets.

@fxi

fxi/index.html

Last active September 13, 2016 10:33
Show Gist options
  • Save fxi/9615d0f2279c05b44756e70db075cb2d to your computer and use it in GitHub Desktop.
Save fxi/9615d0f2279c05b44756e70db075cb2d to your computer and use it in GitHub Desktop.
Download ZIP
search list js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Search js list</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<meta http-equiv="cache-control" content="Public">
<link href="js_search.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Test rendering time for js list</h1>
<div id="testList">
<input id="nRowInput" type="number" name="quantity" min="1" max="999" value="0" step="1">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="a">
Sort by a
</button>
<div>Number of character <span id=charSize>0</span> [char] </div>
<div>List created in <span id=timerCreated>0</span> [ms] </div>
<div>List searched in <span id=timerSearched>0</span> [ms] </div>
<ul class="list"></ul>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>
<script src="js_search.js"></script>
</body>
</html>
Raw
js_search.css
.list {
font-family:sans-serif;
}
td {
padding:10px;
border:solid 1px #eee;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
Raw
js_search.js
/** create a random phrase
*
* @param n {number} Number of words
*/
var rText = function(n){
var letters ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
.split("");
var sentence = [];
for(var i=0;i<n;i++){
var nLetters = Math.round((Math.random()*13));
var word = [];
for(var j=0;j<nLetters;j++){
var pos = Math.round(Math.random()*26*2);
word.push(letters[pos]);
}
sentence.push(word.join(""));
}
return(sentence.join(" "));
};
/** Random list
*
* @param n {number} number of entries
* @param headers {array} array of headers
* @param lengths {array} array of lengths
*/
function randomList(n, headers, lengths){
if(!headers) headers = ["a","b","c"];
if(!lengths) lengths = [1,3,100];
if(!n) n = 10;
n = Math.abs(Math.round(n));
if(headers.length !== lengths.length){
throw("headers should be same length as headers lengths");
}
var res = [];
for(var i =0; i<n ; i++){
var r = {};
for(var j =0; j<headers.length; j++){
r[headers[j]] = rText(lengths[j]);
}
res.push(r);
}
return(res);
}
/* js list options
*
*/
var options = {
valueNames : ["a","b","c"],
item: '<li><h3 class="a"></h3><h5 class="b"></h5><p class="c"></p></li>'
};
/* Numeric input for number of items
*/
nRowInput = document.getElementById("nRowInput");
/* Initial List object
*/
testList = new List('testList',options, randomList(nRowInput.value));
/* Listener for number of items
*/
nRowInput.addEventListener("change",function(x){
if( typeof(testList) !== "undefined"){
var timingDiv = document.getElementById("timerCreated");
var charSizeDiv = document.getElementById("charSize");
var val = x.target.value;
var start = performance.now();
var newList = randomList(val);
testList.clear();
testList.add(newList);
timingDiv.innerHTML = Math.round(performance.now() - start) ;
charSizeDiv.innerHTML = JSON.stringify(newList).length;
}
});
/* update number of items
*/
nRowInput.value=2;
nRowInput.dispatchEvent(new Event('change', { 'bubbles': true }));
/* Search timing
*/
var timerSearch = 0 ;
// start
testList.on("searchStart",function(){
timerSearch = performance.now();
});
// stop
testList.on("searchComplete",function(){
var timerDiv = document.getElementById("timerSearched");
var time = Math.round(performance.now() - timerSearch) ;
timerDiv.innerHTML = time;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment