Skip to content

Instantly share code, notes, and snippets.

@Kimserey

Kimserey/TagInput.fs

Last active January 30, 2016 01:27
Show Gist options
  • Save Kimserey/1454d2501295dca22075 to your computer and use it in GitHub Desktop.
Save Kimserey/1454d2501295dca22075 to your computer and use it in GitHub Desktop.
Download ZIP
Tag input and type ahead with Bootstrap-taginput and typeahead.js in WebSharper. http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ https://twitter.github.io/typeahead.js/
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<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="https://bootswatch.com/paper/bootstrap.min.css" />
<link rel="stylesheet" href="https://raw.githack.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.css" />
<link rel="stylesheet" href="https://raw.githack.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput-typeahead.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"> </script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"> </script>
<script type="text/javascript" src="https://raw.githack.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="Content/app.js"></script>
</body>
</html>
Raw
TagInput.fs
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
with
[<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())
[<JavaScript>]
module Client =
let Main =
let input = inputAttr [ attr.id "tags"; Attr.Create "data-role" "tagsinput" ] []
let pre = preAttr [ attr.id "preview"; attr.style "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" |]
JQuery.Of(input.Dom)
.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