#824 code review

nicegui/elements/input.py

@@ -1,4 +1,4 @@
-from typing import Any, Callable, Dict, Optional
+from typing import Any, Callable, Dict, List, Optional
 
 from .icon import Icon
 from .mixins.disableable_element import DisableableElement
@@ -15,7 +15,7 @@ class Input(ValueElement, DisableableElement):
                  password: bool = False,
                  password_toggle_button: bool = False,
                  on_change: Optional[Callable] = None,
-                 autocomplete: Optional[list] = None,
+                 autocomplete: Optional[List[str]] = None,
                  validation: Dict[str, Callable] = {}) -> None:
         """Text Input
 
@@ -34,7 +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 autocomplete: optional list of strings for autocompletion
         :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)
@@ -54,24 +54,25 @@ class Input(ValueElement, DisableableElement):
 
         self.validation = validation
 
-        if autocomplete is not None:
-            def AutoCompleteInput():
-                if len(self.value) > 0:
+        if autocomplete:
+            def find_autocompletion() -> Optional[str]:
+                if self.value:
                     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=" "')
+                            return item
 
-            def CompleteInput():
-                word = AutoCompleteInput()
-                self.set_value(word)
-                self.props(f'shadow-text=" "')
+            def autocomplete_input() -> None:
+                match = find_autocompletion() or ''
+                self.props(f'shadow-text="{match[len(self.value):]}"')
 
-            self.on("keyup", AutoCompleteInput)
-            self.on("keydown.tab", CompleteInput)
+            def complete_input() -> None:
+                match = find_autocompletion()
+                if match:
+                    self.set_value(match)
+                self.props(f'shadow-text=""')
+
+            self.on('keyup', autocomplete_input)
+            self.on('keydown.tab', complete_input)
 
     def on_value_change(self, value: Any) -> None:
         super().on_value_change(value)

website/more_documentation/input_documentation.py

@@ -12,7 +12,10 @@ def main_demo() -> None:
 
 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():
+    @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 autocomplete_demo():
         options = ['AutoComplete', 'NiceGUI', 'Awesome']
         ui.input(label='Text', placeholder='start typing', autocomplete=options)