diff options
author | Li Haoyi <haoyi@dropbox.com> | 2014-11-02 04:57:37 -0800 |
---|---|---|
committer | Li Haoyi <haoyi@dropbox.com> | 2014-11-02 04:57:37 -0800 |
commit | a33254276bd211bf33be86eeb871ddbfe36fdb47 (patch) | |
tree | b257d473be4fa110f7846f372ea94fc6714dad90 /examples/demos/src/main/scala/webpage/Search1.scala | |
parent | d00a2e25a9ee527fa39feb04c3137715501e9fda (diff) | |
download | hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.tar.gz hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.tar.bz2 hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.zip |
Moved `examples` into `examples/demos`, sketched out a simple example cross-module
Diffstat (limited to 'examples/demos/src/main/scala/webpage/Search1.scala')
-rw-r--r-- | examples/demos/src/main/scala/webpage/Search1.scala | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/examples/demos/src/main/scala/webpage/Search1.scala b/examples/demos/src/main/scala/webpage/Search1.scala new file mode 100644 index 0000000..1936898 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Search1.scala @@ -0,0 +1,62 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Search1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val listings = Seq( + "Apple", "Apricot", "Banana", "Cherry", + "Mango", "Mangosteen", "Mandarin", + "Grape", "Grapefruit", "Guava" + ) + + def renderListings = ul( + for { + fruit <- listings + if fruit.toLowerCase.startsWith( + box.value.toLowerCase + ) + } yield { + val (first, last) = fruit.splitAt( + box.value.length + ) + li( + span( + backgroundColor:="yellow", + first + ), + last + ) + } + ).render + + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = div(renderListings).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "" + output.appendChild(renderListings) + } + + target.appendChild( + div( + h1("Search Box!"), + p( + "Type here to filter " + + "the list of things below!" + ), + div(box), + output + ).render + ) + } +}
\ No newline at end of file |