dioxus_element_plug/components/
autocomplete.rs

1use dioxus::prelude::*;
2
3/// Autocomplete props
4#[derive(Props, Clone, PartialEq)]
5pub struct AutocompleteProps {
6    #[props(default = "placeholder".to_string())]
7    pub placeholder: String,
8
9    #[props(default)]
10    pub value: Option<String>,
11
12    #[props(default)]
13    pub suggestions: Vec<String>,
14
15    #[props(default = false)]
16    pub disabled: bool,
17
18    #[props(default = false)]
19    pub clearable: bool,
20
21    #[props(default)]
22    pub on_select: Option<EventHandler<String>>,
23
24    #[props(default)]
25    pub on_input: Option<EventHandler<String>>,
26
27    #[props(default)]
28    pub class: Option<String>,
29
30    #[props(default)]
31    pub style: Option<String>,
32}
33
34/// Autocomplete component for input with suggestions
35#[component]
36pub fn Autocomplete(props: AutocompleteProps) -> Element {
37    let mut class_names = vec!["el-autocomplete".to_string()];
38    if let Some(ref c) = props.class { class_names.push(c.clone()); }
39
40    let suggestions_owned = props.suggestions.clone();
41    let has_suggestions = !suggestions_owned.is_empty();
42
43    rsx! {
44        div {
45            class: "{class_names.join(\" \")}",
46            style: props.style.clone().unwrap_or_default(),
47            div {
48                class: "el-input",
49                input {
50                    class: "el-input__inner",
51                    r#type: "text",
52                    placeholder: "{props.placeholder}",
53                    value: props.value.clone().unwrap_or_default(),
54                    disabled: props.disabled,
55                    oninput: move |e| {
56                        if let Some(handler) = props.on_input {
57                            handler.call(e.value());
58                        }
59                    },
60                }
61            }
62            if has_suggestions {
63                div {
64                    class: "el-autocomplete-suggestion el-popper",
65                    style: "min-width: 200px;",
66                    ul {
67                        class: "el-autocomplete-suggestion__list",
68                        for suggestion in suggestions_owned.into_iter() {
69                            li {
70                                class: "el-autocomplete-suggestion__item",
71                                onclick: move |_| {
72                                    if let Some(handler) = props.on_select {
73                                        handler.call(suggestion.clone());
74                                    }
75                                },
76                                "{suggestion}"
77                            }
78                        }
79                    }
80                }
81            }
82        }
83    }
84}
dioxus_element_plug/components/autocomplete.rs

dioxus_element_plug/components/
autocomplete.rs
