suggest

package module
Version: v0.0.0-...-f43790c Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Jul 23, 2020 License: Unlicense Imports: 3 Imported by: 1

README

============================
GopherJS_ Input Suggest Menu
============================

.. image:: https://img.shields.io/badge/Language-Go-blue.svg
   :target: https://golang.org/

.. image:: https://godoc.org/github.com/siongui/gopherjs-input-suggest?status.svg
   :target: https://godoc.org/github.com/siongui/gopherjs-input-suggest

.. image:: https://travis-ci.org/siongui/gopherjs-input-suggest.svg?branch=master
    :target: https://travis-ci.org/siongui/gopherjs-input-suggest

.. image:: https://gitlab.com/siongui/pali-dictionary/badges/master/pipeline.svg
    :target: https://gitlab.com/siongui/pali-dictionary/-/commits/master

.. image:: https://goreportcard.com/badge/github.com/siongui/gopherjs-input-suggest
   :target: https://goreportcard.com/report/github.com/siongui/gopherjs-input-suggest

.. image:: https://img.shields.io/badge/license-Unlicense-blue.svg
   :target: https://github.com/siongui/gopherjs-input-suggest/blob/master/UNLICENSE


Development Environment:

  - `Ubuntu 20.04`_
  - `Go 1.12.17`_
  - GopherJS_


Install
+++++++

Install GopherJS_ and this package:

.. code-block:: bash

  $ go get -u github.com/gopherjs/gopherjs
  $ go get -u github.com/siongui/gopherjs-input-suggest


Example
+++++++

See demos first. The following is key point in the code.

- Demo_ (no CSS framework)
- Demo-Bulma_ (with Bulma 0.9.0)

HTML_:

.. code-block:: html

  <div style="position: relative;">
    <input id="word" type="text" autofocus="autofocus" tabindex="1">
  </div>

The parent of input element is set to *position: relative;*. Also do not use
*text-align: center;* in parent/ancestor element of input element.

Go_:

.. code-block:: go

  BindSuggest("word", func(w string) []string {
  	// suggestion function implemented by you
  	return frozenTrie.GetSuggestedWords(w, 30)
  })

See `example <example>`_ directory for complete example.


Control Suggest Menu Behavior by Outside Widget
+++++++++++++++++++++++++++++++++++++++++++++++

Two methods *UpdateSuggestion* and *HideSuggestion* are exported so that outside
widget such as virtual Pali keypad can control the behavior of the suggest menu.
The reason why Pali keypad need this is that when users click the button on the
Pali keypad, no keyboard events are fired so that suggest menu will not be
updated or hidden automatically. As a result, Pali keypad has to update or hide
the suggest menu manually by these two methods.


UNLICENSE
+++++++++

Released in public domain. See UNLICENSE_.


References
++++++++++

.. [1] `GopherJS - A compiler from Go to JavaScript <http://www.gopherjs.org/>`_
       (`GitHub <https://github.com/gopherjs/gopherjs>`__,
       `GopherJS Playground <http://www.gopherjs.org/playground/>`_,
       |godoc|)

.. [2] `Element.classList - Web APIs | MDN <https://developer.mozilla.org/en/docs/Web/API/Element/classList>`_

.. [3] `javascript set left position <https://www.google.com/search?q=javascript+set+left+position>`_

       `HTML DOM Style left Property - W3Schools <http://www.w3schools.com/jsref/prop_style_left.asp>`_

.. [4] `javascript min width <https://www.google.com/search?q=javascript+min+width>`_

       `HTML DOM Style minWidth Property - W3Schools <http://www.w3schools.com/jsref/prop_style_minwidth.asp>`_

.. [5] `GitHub - siongui/godom: Make DOM manipultation in Go as similar to JavaScript as possible. (via GopherJS) <https://github.com/siongui/godom>`_

.. [6] | `bulma input suggest dropdown - Google search <https://www.google.com/search?q=bulma+input+suggest+dropdown>`_
       | `Autocomplete | Buefy <https://buefy.org/documentation/autocomplete/>`_


.. _Ubuntu 20.04: https://releases.ubuntu.com/20.04/
.. _Go 1.12.17: https://golang.org/dl/
.. _HTML: https://www.google.com/search?q=HTML
.. _Go: https://golang.org/
.. _GopherJS: https://github.com/gopherjs/gopherjs
.. _Demo: https://siongui.github.io/gopherjs-input-suggest/
.. _Demo-Bulma: https://siongui.github.io/gopherjs-input-suggest/index-bulma.html
.. _UNLICENSE: https://unlicense.org/

.. |godoc| image:: https://godoc.org/github.com/gopherjs/gopherjs/js?status.png
   :target: https://godoc.org/github.com/gopherjs/gopherjs/js

Documentation

Overview

Package suggest provides input suggestion menu feature for frontend. This is similar to Autocomplete feature of Buefy (https://buefy.org/). The code of this library is written in Go and must be compiled to JavaScript via GopherJS. The BindSuggest method is initialization function of the input suggest. For simple application, using this method once in your application initialization code should be enough and it will run automatically. If you need to control the behavior of the suggest menu during the runtime of your application, use UpdateSuggestion or HideSuggestion methods.

Index

Constants

View Source
const (
	TAB    = 9
	RETURN = 13
	ESC    = 27
	LEFT   = 37
	UP     = 38
	RIGHT  = 39
	DOWN   = 40
)

Variables

This section is empty.

Functions

func HideSuggestion

func HideSuggestion()

HideSuggestion will hide the input suggest menu.

func IsShowSuggestMenu

func IsShowSuggestMenu() bool

IsShowSuggestMenu reports if the suggest menu is visible now.

func OnHideSuggestMenu

func OnHideSuggestMenu(handler func())

OnHideSuggestMenu registers an event handler when suggest menu is being hidden.

func OnHighlightSelectedWord

func OnHighlightSelectedWord(handler func(string))

OnHighlightSelectedWord registers an event handler of which the argument is the selected word.

func OnUpdateSuggestMenu

func OnUpdateSuggestMenu(handler func(string))

OnUpdateSuggestMenu registers an event handler of which the argument is the selected word.

func UpdateSuggestion

func UpdateSuggestion()

UpdateSuggestion will read the value of input element and update suggest menu accordingly.

Types

type SuggestMenuStateMachine

type SuggestMenuStateMachine struct {
	Input                        *Object
	SuggestMenu                  *Object
	FuncSugguestWords            func(string) []string
	CurrentSelectedWordIndex     int
	IsShowSuggestMenu            bool
	SuggestedWordsDivs           []*Object
	OriginalWord                 string
	SuggestedWords               []string
	HighlightSelectedWordHandler []func(string)
	UpdateSuggestMenuHandler     []func(string)
	HideSuggestMenuHandler       []func()
}

func BindSuggest

func BindSuggest(id string, fnSugguestWords func(string) []string) *SuggestMenuStateMachine

BindSuggest is the initialization function for the input suggest feature. The first argument is the id of the input element. The second argument is a function implemented by you. Given a string, the function will return possible suggest strings for users to choose.

func NewSuggestMenuStateMachine

func NewSuggestMenuStateMachine(input, sm *Object, fnSugguestWords func(string) []string) *SuggestMenuStateMachine

func (*SuggestMenuStateMachine) GetWord

func (s *SuggestMenuStateMachine) GetWord() string

func (*SuggestMenuStateMachine) HandleArrowDown

func (s *SuggestMenuStateMachine) HandleArrowDown()

func (*SuggestMenuStateMachine) HandleArrowUp

func (s *SuggestMenuStateMachine) HandleArrowUp()

func (*SuggestMenuStateMachine) HandleESC

func (s *SuggestMenuStateMachine) HandleESC()

func (*SuggestMenuStateMachine) HideSuggestMenu

func (s *SuggestMenuStateMachine) HideSuggestMenu()

func (*SuggestMenuStateMachine) HighlightSelectedWord

func (s *SuggestMenuStateMachine) HighlightSelectedWord(index int)

func (*SuggestMenuStateMachine) SetWord

func (s *SuggestMenuStateMachine) SetWord(word string)

func (*SuggestMenuStateMachine) ShowSuggestMenu

func (s *SuggestMenuStateMachine) ShowSuggestMenu()

func (*SuggestMenuStateMachine) UnhighlightSelectedWord

func (s *SuggestMenuStateMachine) UnhighlightSelectedWord(index int)

func (*SuggestMenuStateMachine) UpdateSuggestMenu

func (s *SuggestMenuStateMachine) UpdateSuggestMenu(word string)

Directories

Path Synopsis

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
t or T : Toggle theme light dark auto
y or Y : Canonical URL