enyo search list en click popup next to mouse
HTML
<script type="text/javascript">
new App().renderInto(document.body);
</script>
CSS
.list{
background-color:lightgray;
color:#333;
}
.listitemselected{
background-color:red;
}
.listitem:hover{
background-color:yellow;
}
JavaScript
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{kind: "enyo.Popup", name:'popupcontainer', onHide:'hidePopup', onShow:"showPopup", /*modal: true,*/ floating: true, components: [
{content: "Here's some information...", name:"popuptext",style:'background-color:green;'}
]},
{kind: 'FittableRows', components:[
{name: 'header', kind: 'onyx.Toolbar', components: [
{kind: "onyx.InputDecorator", components: [
{kind: "onyx.Input", name:"inputfield", placeholder: "Search"},
]}
]},
{kind: "List", fit: true, name:'list', classes:'list', count: 20, fixedHeight: true, onSetupItem: "setupItem", components: [
{name: "item", classes:'listitem', ontap: "itemTap", components: [
{tag:'span', name: "name", content:"song name"},
{tag:'span', name: "index", content:"", style:'float:right;'}
]},
]},
]}
],
searchstring:'',
search: function(inSender, inEvent) {
this.searchstring = this.$.inputfield.getValue();
this.$.list.refresh();
},
setupItem: function(inSender, inEvent) {
// just to have something to fill in
var data = ['alibaba', 'alibobo', 'alibibi'];
this.$.index.setContent(inEvent.index);
this.$.name.setContent(data[inEvent.index %3]);
// if searchstring isn't emty get to work
if(this.searchstring != ''){
var regex = new RegExp(this.searchstring); // = /searchstrin/g
if(this.$.name.getContent().search(regex) != -1){ // -1 = not found
this.$.list.select(inEvent.index, true); // set state selected true
}
// if selected = true change add css class
this.$.item.addRemoveClass("listitemselected", inSender.isSelected(inEvent.index));...