fmartingr
/
amiibofindr
mirror of https://github.com/fmartingr/amiibofindr.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Search can now be reset via cross button

This commit is contained in:
Felipe Martín 2015-08-27 19:36:56 +02:00
parent fcd885747c
commit df78f7662c
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
amiibofindr/static/app/collectionSearch.js
View File

@ -8,6 +8,7 @@
// Required DOM
this.$searchInput = document.querySelector('[data-component="collectionSearchInput"]');
this.$resetButton = document.querySelector('[data-component="collectionSearchReset"]');
this.$collectionList = document.querySelector('[data-component="collectionList"]').children;
// Add event handlers
@ -15,6 +16,10 @@
self.search(self.$searchInput.value);
});
this.$resetButton.addEventListener('click', function(event) {
self.reset();
});
// Focus search input
this.$searchInput.focus();
};
@ -28,6 +33,8 @@
};
CollectionSearchComponent.prototype.reset = function() {
this.$searchInput.value = '';
for (var index = 0; index < this.$collectionList.length; index++) {
var item = this.$collectionList[index];
this.showItem(item);

2
amiibofindr/templates/amiibo/collection.html
View File

@ -27,7 +27,7 @@
{% if selected_collection.name %}<h1>{{ selected_collection.name }}</h1>{% endif %}
<div class="ui icon big fluid input">
<input type="text" placeholder="Search..." data-component="collectionSearchInput">
<i class="inverted circular search link icon"></i>
<i class="inverted circular cancel link icon" data-component="collectionSearchReset"></i>
</div>
</div>
<div class="sixteen wide column">