public
Last active

Opa - Fun with autocompletion

  • Download Gist
autocompletion.opa
Opa
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
import stdlib.themes.bootstrap
import stdlib.widgets.bootstrap
import stdlib.widgets.completion
import stdlib.web.client
 
WB = WBootstrap
 
function array_completion(options, on_select) {
config = {
WCompletion.default_config with
suggest: function (str) {
matches = List.filter(
function(option) {
String.has_prefix(str, option)
},
options
)
List.map(
function(option) {
{
input: str,
display: <span style="font-weight: bold">{option}</span>,
item: {some: option}
}
},
matches
)
}
}
 
WCompletion.html(
config,
on_select,
"completion",
{input: "", display: <h2>None</h2>, item: {none}}
)
}
 
function page() {
on_select = function (opt) {
match(opt) {
case {some: option}: #prenoms =+ <li>{option}</li>
case {none}: Client.alert("Veuillez sélectionner un prénom existant.")
}
}
 
WB.Layout.fixed(
<>
<h1>Test de la complétion</h1>
<p>Ajoutez des prénoms avec ce widget</p>
{array_completion(["Alain", "Albert", "Paul", "Bertrand", "Bernard", "Bernadette"], on_select)}
<div>
<ul class="nav nav-list" id="prenoms">
</ul>
</div>
</>
)
}
 
 
 
function dispatch(_) {
Resource.page("Completion", page())
}
 
Server.start(Server.http, {~dispatch})

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.