yew_autocomplete/view/
plain.rs

1use web_sys::HtmlInputElement;
2use yew::prelude::*;
3use yew::Html;
4
5use crate::render_if;
6
7use super::render_items;
8use super::RenderHtml;
9
10#[function_component(Plain)]
11pub fn plain<T: 'static + Clone + PartialEq + RenderHtml>() -> Html {
12    let view_ctx = use_context::<super::Context<T>>().expect("view::Context wasn't provided");
13
14    let items = render_items(&view_ctx, &[], &[])
15        .into_iter()
16        .map(|item| {
17            html! { <li>{item}</li>}
18        })
19        .collect::<Html>();
20    let selected_lis = view_ctx
21        .selected_items
22        .iter()
23        .map(|value| {
24            html! { <li class={classes!("autocomplete-item", "selected")}>{value.render()}</li> }
25        })
26        .collect::<Html>();
27
28    let input_cb = view_ctx.callbacks.on_input.clone();
29    let oninput = move |e: InputEvent| {
30        let input = e.target_dyn_into::<HtmlInputElement>().unwrap();
31        input_cb.emit(input.value());
32    };
33    let onsearch = view_ctx.callbacks.resolve.clone();
34
35    html! {
36        <div>
37            {
38                render_if(!view_ctx.selected_items.is_empty(), html!{
39                    <ul class="selected-items">
40                        { selected_lis }
41                    </ul>
42                })
43            }
44            <input
45                type="text"
46                value={view_ctx.value.clone()}
47                {oninput}
48                onkeydown={view_ctx.callbacks.on_keydown.clone()}
49            />
50            {
51                render_if(
52                    !view_ctx.auto,
53                    html! {
54                        <input type="button" value="Search" onclick={onsearch}/>
55                    }
56                )
57            }
58            {
59                render_if(!view_ctx.items.is_empty(), html!{
60                    <ul class="autocomplete-items">
61                        { items }
62                    </ul>
63                })
64            }
65        </div>
66    }
67}
yew_autocomplete/view/plain.rs

yew_autocomplete/view/
plain.rs
