Scala.jsFiddle gist

Main.scala

import org.scalajs.dom
import dom.html
import scalajs.js.annotation.JSExport


object ScalaJSExample extends js.JSApp{

val listings = Seq(
  "Apple", "Apricot", "Banana", "Cherry",
  "Mango", "Mangosteen", "Mandarin",
  "Grape", "Grapefruit", "Guava"
)


val box = input(
  `type`:="text",
  placeholder:="Type here!"
).render

val output = div(renderListings).render


box.onkeyup = (e: dom.Event) => {
  output.innerHTML = ""
  output.appendChild(renderListings)
}


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


  def main() = {
    val document = js.Dynamic.global.document
    val d=   div(
    h1("Search Box!"),
    p(
      "Type here to filter " +
      "the list of things below!"
    ),
    div(box),
    output
  ).render

    println(d)
  }
}