-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathjuice_test.html
78 lines (59 loc) · 2.44 KB
/
juice_test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>drinkBase</title>
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script type="application/javascript">
var ingredientsDF;
function getData() {
//populate drop down
d3.csv("drinkBase/data/chemistry.csv", function(d) {
ingredientsDF = d;
//fillIngredients('rye');
});
}
// fill the drop down menu
function oldFill() {
var inputText = document.getElementById('searchText').value
var p = d3.select("#ingredientDropDown").selectAll("option")
.data(ingredientsDF.filter(function(d) {
return d.ingredient.toLowerCase().match(RegExp(inputText.toLowerCase()))
}))
/*.data(ingredientsDF.filter(function(d) {
return RegExp(inputText).test(d.ingredient);
//return d.ingredient.toLowerCase().indexOf(inputText.toLowerCase()) >= 0;
//return d.ingredient.contains(inputText);
//return d.class == 'Spirit';
}))*/
.enter()
.append("option")
.text(function(d) {
return d.ingredient
});
}
function fillIngredients() {
var inputText = document.getElementById('searchText').value
var pickSpan = d3.select("#ingredientDiv").selectAll("span")
.data(ingredientsDF.filter(function(d) {
return d.ingredient.toLowerCase().match(RegExp(inputText.toLowerCase()))
}))
.enter()
.append("span")
.text(function(d) {
return d.ingredient + ' :: '
});
//
}
</script>
</head>
<body onload="setTimeout(getData,500)">
<div id="ingredientDiv" class="dropdown" >
<input type=text id=searchText onchange="fillIngredients();oldFill();">
<select id="ingredientDropDown" style="font-size: 12pt;">
</select>
</div>
</body>
</html>