JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<main></main>

<script id="srch" type="text/ractive">
  <div class="ui {{#typing}}loading{{/typing}} search {{#focus}}focus{{/focus}}">
  	<div class="ui icon input">
  		<input class="prompt " type="text" placeholder="{{placeholder}} " value="{{selection}}" autocomplete="off " on-focus="set( 'focus', true) " on-click="toggle( 'show') " on-blur="set( 'focus', false)"/>
  		<i class="search icon"></i>
  	</div>
  	<div class="results {{#show}} transition visible {{/show}}" style="{{#show}}display: block !important{{/show}}" on-click="set('show', false)">
    {{#results}}
    	<a class="result" on-click="{{proxyEvt}}:{{.}}">{{.}}</a> 
    {{/results}}
  	</div>
  </div>
</script>

JavaScript

var Srch = Ractive.extend({
  template: '#srch',
  data() {
    return {
      typing: false,
      show: false,
      focus: false,
      proxyEvt: '',
      selection: ''
    }
  }
  ,oninit() {
  	this.on(this.get('proxyEvt'), function(_, sel) {
    	this.set('selection', sel)
      this.fire(this.get('proxyEvt'), sel)
    }.bind(this))
  }
  
})
new Ractive({
  el: 'main',
  template: '<Srch placeholder="Hello" results="{{lst}}" proxyEvt="property"/><br/><Srch placeholder="Hello" results="{{lst}}" proxyEvt="val"/>',
  components: {
    Srch
  },
  data() {
    return {
      lst: [
        'one', 'two', 'three'
      ]
    }
  }
  ,oninit() {
  	var self = this
    
    self.on('Srch.srch1', function(_, sel, val) {
      console.log(sel, '-',val)
    })
  }
})