Skip to content

Instantly share code, notes, and snippets.



Last active Jan 30, 2016
What would you like to do?
Tag input and type ahead with Bootstrap-taginput and typeahead.js in WebSharper.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="Content/app.css" />
<script type="text/javascript" src="Content/app.head.js"></script>
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<script type="text/javascript" src=""> </script>
<script type="text/javascript" src="" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script type="text/javascript" src=""> </script>
<script type="text/javascript" src=""></script>
<div id="main"></div>
<script type="text/javascript" src="Content/app.js"></script>
open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client
[<JavaScript; AutoOpen>]
module JQuery =
type JQuery
[<Inline "$0.tagsinput({ typeaheadjs: { source: $1 }})">]
member private this.Ti (findMatches: FuncWithArgs<string * (string [] -> unit), unit>) = X<unit>
member this.TagInput (onChange: (string * (string [] -> unit)) -> unit) onSelect =
do this.Ti <| FuncWithArgs(onChange)
let getValue() =
this.Val() |> string |> onSelect
this.On("itemAdded", fun _ _ -> getValue())
.On("itemRemoved", fun _ _ -> getValue())
module Client =
let Main =
let input = inputAttr [ "tags"; Attr.Create "data-role" "tagsinput" ] []
let pre = preAttr [ "preview"; "margin-top:30px;" ] []
[ input; pre ]
|> Seq.cast
|> Doc.Concat
|> Doc.RunById "main"
let states =
[| "Alabama"; "Alaska"; "Arizona"; "Arkansas"; "California";
"Colorado"; "Connecticut"; "Delaware"; "Florida"; "Georgia"; "Hawaii";
"Idaho"; "Illinois"; "Indiana"; "Iowa"; "Kansas"; "Kentucky"; "Louisiana";
"Maine"; "Maryland"; "Massachusetts"; "Michigan"; "Minnesota";
"Mississippi"; "Missouri"; "Montana"; "Nebraska"; "Nevada"; "New Hampshire";
"New Jersey"; "New Mexico"; "New York"; "North Carolina"; "North Dakota";
"Ohio"; "Oklahoma"; "Oregon"; "Pennsylvania"; "Rhode Island";
"South Carolina"; "South Dakota"; "Tennessee"; "Texas"; "Utah"; "Vermont";
"Virginia"; "Washington"; "West Virginia"; "Wisconsin"; "Wyoming" |]
.TagInput (fun (query, cb) -> cb (states |> Array.filter (fun (e: string )-> e.Contains query))) (pre.SetText)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.