Merge pull request #824 from phoskee/AutoCompleteInput

Auto complete input

nicegui/elements/input.py

@@ -15,6 +15,7 @@ class Input(ValueElement, DisableableElement):
                  password: bool = False,
                  password_toggle_button: bool = False,
                  on_change: Optional[Callable] = None,
+                 autocomplete: Optional[list] = None,
                  validation: Dict[str, Callable] = {}) -> None:
         """Text Input
 
@@ -33,6 +34,7 @@ class Input(ValueElement, DisableableElement):
         :param password: whether to hide the input (default: False)
         :param password_toggle_button: whether to show a button to toggle the password visibility (default: False)
         :param on_change: callback to execute when the value changes
+        :param autocomplete: options for autocompletition
         :param validation: dictionary of validation rules, e.g. ``{'Too short!': lambda value: len(value) < 3}``
         """
         super().__init__(tag='q-input', value=value, on_value_change=on_change)
@@ -52,6 +54,25 @@ class Input(ValueElement, DisableableElement):
 
         self.validation = validation
 
+        if autocomplete is not None:
+            def AutoCompleteInput():
+                if len(self.value) > 0:
+                    for item in autocomplete:
+                        if item.startswith(self.value):
+                            self.props(f'shadow-text="{item[len(self.value):]}"')
+                            wordcomplete = item
+                            return wordcomplete
+                else:
+                    self.props(f'shadow-text=" "')
+
+            def CompleteInput():
+                word = AutoCompleteInput()
+                self.set_value(word)
+                self.props(f'shadow-text=" "')
+
+            self.on("keyup", AutoCompleteInput)
+            self.on("keydown.tab", CompleteInput)
+
     def on_value_change(self, value: Any) -> None:
         super().on_value_change(value)
         for message, check in self.validation.items():

website/more_documentation/input_documentation.py

@@ -1,8 +1,18 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
     ui.input(label='Text', placeholder='start typing',
              on_change=lambda e: result.set_text('you typed: ' + e.value),
              validation={'Input too long': lambda value: len(value) < 20})
     result = ui.label()
+
+
+def more() -> None:
+
+    @text_demo('Auto complete input', ' The `autocomplete` feature provides suggestions as you type, making input easier and faster. The parameter `options` is a list of strings that contains the available options that will appear.')
+    async def autocompleteinput():
+        options = ['AutoComplete', 'NiceGUI', 'Awesome']
+        ui.input(label='Text', placeholder='start typing', autocomplete=options)