Opa - Fun with autocompletion

autocompletion.opa

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})