<!doctype html>

<html>
  <head>
    <title>Riot todo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->

  </head>

  <body>

    <someapp></someapp>

    <script src="someapp.tag" type="riot/tag"></script>
    <script src="autocomplete.tag" type="riot/tag"></script>
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

    <script>
    riot.mount('someapp')
    </script>

  </body>

</html>
<autocomplete>
  	<h2> autocomplete input field: </h2>
		<input type="text" value={ opts.setup.selectedValue } name={ opts.setup.name } onkeyup={}/>
		
    <button onclick={whatever} >herp it!</button>
     <button onclick={okay} >ok it!</button>
    
    <script>
     var self = this;
     var value = "";
     self.keyup = function(e) {
      value = e.target.value;
     };
     
     self.whatever = function(e) {
       e.preventDefault();
       opts.setup.callback("herpderp");
      };
      self.okay = function(e) {
        e.preventDefault();
       opts.setup.callback("okay");
      };
      </script>
</autocomplete>
<someapp>
  	<h1>Some app: </h1>
    	<autocomplete setup={ addressac }> </autocomplete>
      <autocomplete setup={ anotherac }> </autocomplete>
      
    <script>
    var self = this;
    self.addressac = {
    	selectedValue: "",
    	callback: function(newValue) {
      	self.addressac.selectedValue = newValue;
      	self.update();
      },
      name: "addressform"
    };
    
    self.anotherac = {
    	selectedValue: "",
    	callback: function(newValue) {
      	self.anotherac.selectedValue = newValue;
      	self.update();
      },
      name: "addressform"
    };
    </script>
    
</someapp>