# beta.114 - Info, Settings, Choice Events

## Displaying Temporary Info

Until now, `await div()` worked by waiting for the user to hit enter/escape. This still works fine, but if you want to "timeout" a `div` to display temporary info without user input, this entire script will run without any user interaction:

[Install non-blocking-div](https://scriptkit.com/api/new?name=non-blocking-div&url=https://gist.githubusercontent.com/johnlindquist/87e92156251d09a02154f04772f1e9bf/raw/be6dde40a7f5e1f3b8eaa9abf68d8698031cd3de/non-blocking-div.js")

```js
import "@johnlindquist/kit"

let classes = `p-5 text-3xl flex justify-center items-center text-center`

div(`Wait 1 second...`, classes)
await wait(1000)

div(`Just 2 more seconds...`, classes)
await wait(2000)

div(`Almost there...`, classes)
await wait(3000)

```

## Remember Selection

I needed to build a settings "panel", so I wanted to make a list that could toggle. 


![CleanShot 2021-11-22 at 12 08 29](https://user-images.githubusercontent.com/36073/142920816-3bf47911-578b-4e2f-9662-10257287fde4.png)

The solution was to remember the previous choice by `id`. Any time `arg` is invoked, it will check to see if a choice has an id that matched the previously submitted choice and focus back on it. This enables you to hit enter repeatedly to toggle a choice on and off.

[Install remember-selection](https://scriptkit.com/api/new?name=remember-selection&url=https://gist.githubusercontent.com/johnlindquist/a86395d809c260d943f9763023f5a6f0/raw/4c1057b8500fcdf34fcd179af52f09cc7dee9ca4/remember-selection.js")

```js
import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "On",
  },
  {
    id: uuid(),
    name: "Off",
  },
  {
    id: uuid(),
    name: "On",
  },
]

let argConfig = {
  placeholder: "Toggle items",
  flags: {
    end: {
      shortcut: "cmd+enter",
    },
  },
}

while (true) {
  let item = await arg(argConfig, data)
  data.find(i => i.id === item.id).name =
    item.name === "On" ? "Off" : "On"

  if (flag.end) break
}

await div(JSON.stringify(data), "p-2 text-sm")
```

You could also use this when making a sequence of selections:

[Install remember-sequence](https://scriptkit.com/api/new?name=remember-sequence&url=https://gist.githubusercontent.com/johnlindquist/80f9d005e5bff92691125f736199aa2c/raw/4e05c118bc91defe5e2f39cff20eb9862f4c6a2d/remember-sequence.js")

```js
import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "One",
  },
  {
    id: uuid(),
    name: "Two",
  },
  {
    id: uuid(),
    name: "Three",
  },
]

let selections = []

let one = await arg(`First selection`, data)
selections.push(one)

let two = await arg(
  {
    placeholder: `Second selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(two)

let three = await arg(
  {
    placeholder: `Third selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(three)

await div(
  selections.map(s => s.name).join(", "),
  "p-2 text-sm"
)

```



[Install no-choices-event](https://scriptkit.com/api/new?name=no-choices-event&url=https://gist.githubusercontent.com/johnlindquist/5534589a322bbb384e5bf4dbcbf00864/raw/1a7c2500149db3b8731e900646d568fa7fb5ed74/no-choices-event.js")

## Choice Events

`onNoChoices` and `onChoices` allows Kit.app to tell your script when the user has typed something that filtered out every choice. Most commonly, you'll want to provide a `setHint` (I almost made it a default), but you can add any logic you want.

```js
import "@johnlindquist/kit"

await arg(
  {
    placeholder: `Pick a fruit`,
    onChoices: async () => {
      setHint(``)
    },
    onNoChoices: async input => {
      setHint(`No choices matched ${input}`)
    },
  },
  [`Apple`, `Orange`, `Banana`]
)

```

