Binding Search

[deshartman]

I am trying out the Search Input component, but it is not working (or working as expected). What I am trying to get is the value of the search term entered. I tried the Input and Number Input and both are able to bind to a value like this:

<script>
  import { Input, Search } from "flowbite-svelte";

  let value = "";
</script>

<Input bind:value />
<p>Value: {value}</p>

This binds as expected and shows the value in the p-tag

However when I do the same on Search Input, I get nothing. I have also tried the on:submit event and it never fires?

<script>
  import { Input, Search } from "flowbite-svelte";

  let value = "";
</script>

<Search bind:value />
<p>Value = {value}</p>

This does not show the value in the p-tag.

I also tried the on:submit event as per Events, but it never fires:

<script>
  import { Input, Search } from "flowbite-svelte";

  let value = "";

 const submitted = () => {
    console.log(`Clear search: ${value}`);
  };
</script>

<Search bind:value on:submit={submitted}/>
<p>Value = {value}</p>

What I am trying to do is get the value the user entered into the Search Input and then act on it.

[shinokada]

Yes, the Search component should bind a value and have on:submit event forward. I will add them in the next version.

[deshartman]

Thanks. I see it is actually already in a pull request.

would also be good to understand how the on:submit would work? Would it pass the full text in an event?

[shinokada]

I will bind a value to Search component but you need to use on:submit event to the form tag.

<script>
  import { Search, Button } from '$lib';
  let value = '';

  const submitted = () => {
    alert(`You are searching: ${value}`);
  };
</script>

<form id="form1" on:submit={submitted}>
    <Search bind:value />
    <p>Value = {value}</p>
    <Button type="submit">Submit</Button>
  </form>