Reuse logic of GUI element

Hi there,

Let say I have an input field with suggestions : when I type, it suggest some possible inputs either by calling an API or in a predefined list.

So I need a massage to pass to an update method to handle the ‘oninput’ event, a function which returns a list of suggestions from the input and a view element, like an input field to display the value and the list of suggestions.

Question : how can I make this code reusable to have many fields like that without duplicating everything ?

My question is not very precise because I don’t exactly know how to call that capability : generic, dispatch, composition, components, younameit.

Basically what I want to do it to attach a suggestion function to an input field, this for many fields and functions (or partial function).

Thanks for your hints

For the view a usual way is to have a reusable view that wraps your input. This view could have arguments like:

type Args msg =
  { currentInputValue: String
  , suggestions: List String
  , onInput: String -> msg 
  }

inputWithSuggestion: Args msg -> Html msg

When you type something in the input, it will emit a message specified by the wrapper application. The update in the application will get the suggestions and eventually feed them to the input via suggestions.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.