Simple example showing how to create a input box that provides suggestions using Piglets.

SearchWithSuggestions.fs

module SearchWithSuggestions

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open SenchaTouch
open IntelliFactory.WebSharper.Piglets

[<JavaScript>]
module View =

    type InputWithSuggestions =
        {
            //Field to collect user input
            query       : string
            //Field to provide suggestions
            suggestions : string []
            //Field to collect the option selected by the user
            result      : string
        }
    
    let MapAsync  (f : 'a->Async<'b>) (r : Reader<'a>) (w :Writer<'b>) : unit =
        r.Subscribe
            (function 
                | Success x -> 
                    async{
                        let! res = f x
                        res |> Success |> w.Trigger
                        return ()
                        } |> Async.Start
                | Failure msgs -> Failure msgs |> w.Trigger)
        |> ignore

    let Options = 
        [|
            "Church"
            "Chompsky"
            "Turing"
            "Torvalds"
            "Curry"
        |]

    let Suggest input =
        let f (cb : string [] -> unit) =  
            Options 
            |> Array.filter (fun e -> e.Contains input)
            |> cb
        async{
            let! res = Async.FromContinuations (fun (ok,_,_) -> JavaScript.SetTimeout (fun () -> f ok) 2000 |> ignore)
            return res
        }

    
    let InputWithSuggestionsPiglet init =
        Piglet.Return 
            (fun query suggestions result ->
             {
                query        = query
                suggestions  = suggestions
                result       = result
             })
        <*> Piglet.Yield init.query
        <*> Piglet.Yield init.suggestions
        <*> Piglet.Yield init.result
    
    let SuggestionsBox query suggestions result =
            
        let elements : Ext.Component [] =
            [|
                Ext.field.Text() |> Reactive.Text.WithText query;
        
                Ext.field.Select()
                |> SenchaTouch.Reactive.Select.WithSelect(As,As,result)
                |> SenchaTouch.Reactive.Select.WithOptions (Array.map (fun l -> New[("text",As l);("value",As l)]),suggestions);

                ExtCfg.Label(Html="").Create()
                |> Reactive.Label.WithLabelGen ((fun o -> "You selected: "+o.ToString()),result |> As<Reader<obj>>)
            |]

        MapAsync Suggest query suggestions
        
        ExtCfg.Container(Items=elements,Layout="hbox").Create()

    
    let SuggestionBoxHtml query (suggestions : Stream<string []>) result =

        MapAsync Suggest query suggestions

        let RadioSelector (options : Reader<string []>) (output : Stream<string>) =
            let child = Controls.Radio output [] |> ref
            let sel = Div [!child]
            options.Subscribe(
                function 
                    | Failure _ -> ()
                    | Success a -> 
                        child.Value.Remove ()
                        child := a |> Array.map (fun e -> (e,e)) |> Controls.Radio result
                        !child |> sel.Append |> ignore
            ) |> ignore
            sel

        Div
            [
                Controls.Input query
                RadioSelector suggestions result
                Span [] |> Controls.ShowString result (fun r -> "You selected: "+r)
            ]

    let RenderWith f =
        {query="";suggestions=[||];result=""}
        |> InputWithSuggestionsPiglet
        |> Piglet.Render f

    let Render () = RenderWith SuggestionsBox

    let RenderHtml () = RenderWith SuggestionBoxHtml

type AppControlHtml() =
    inherit Web.Control()

    [<JavaScript>]
    override this.Body = View.RenderHtml () :> IPagelet      

type AppControl() =
    inherit Web.Control()

    [<JavaScript>]
    override this.Body =
        let cfg = obj()
        cfg?name <- "Suggestions"
        cfg?launch <- 
            (fun () -> 
                ExtCfg.Panel(
                        Fullscreen=true,
                        Items=[|View.Render ()|]                    
                    ).Create() |> ignore
            ) 
        cfg |> As |> Ext.Application
        upcast IntelliFactory.WebSharper.Html.Default.Div []