Improve the docs about typeahead HOT 16 CLOSED

@fnils So I wanted to try it out and see what using Value and ValueChanged was like, it's not an enjoyable experience!

<BlazoredTypeahead SearchMethod="GetPeopleLocal"
                   Value="SelectedPerson"
                   ValueChanged="OnValueChanged"
                   TValue="Person"
                   TItem="Person"
                   ValueExpression="@(() => SelectedPerson)"
                   ShowDropDownOnFocus="true"
                   placeholder="Search by first name...">
    <SelectedTemplate Context="person">
        @person.Firstname
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @person.Firstname @person.Lastname
    </ResultTemplate>
</BlazoredTypeahead>

@code {
    private void OnValueChanged(Person selectedPerson)
    {
        SelectedPerson = selectedPerson;
    }
}

This is what you need to make it work.

from typeahead.

I'd go with a wiki, makes it a bit easier, I'll see what I can do later this week. I do want some input though, what should be in the wiki?

• Basic Usage
• Advanced Usage
• Best practises
• ... ?

from typeahead.

Also the docs say to add ref to "@using Blazored.Typeahead.Forms" but this causes an error. Only works if you use @using Blazored.Typeahead

from typeahead.

Sorry this was a hangover from the older version. I've updated the docs now.

from typeahead.

Thanks for the update! Also would be handy to have at least one example code snippet that could work out of the box. Current examples don't compile because there are missing models/references, etc.

from typeahead.

The examples in the readme are just for reference. If you want to see working code then you can checkout the sample applications in the repo.

I'm working on a full docs site for all the Blazored components but it's a large project.

from typeahead.

Got it, thanks. Understand it's a large effort, I appreciate the work that has gone into all of these components. Will try to contribute when I get to the level of being helpful!

from typeahead.

How does it work if I want to use Value and ValueChanged instead of bind-value?
I get an error after the change to Value and ValueChange.
Exception thrown: 'System.ArgumentNullException' in Microsoft.AspNetCore.Components.Forms.dll
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Value cannot be null. (Parameter 'accessor')

from typeahead.

@fnils In all honesty I haven't used that method of binding before. Whats the use case for it?

from typeahead.

I want to invoke an async EventCallback when a value is changed and I wanted to have an await. But maybe I am going about it in the wrong way. It works as is (with the @bind-Value) so it not really a problem. But I got curious when got the error and couldn't find an example.

from typeahead.

Chris,
You may want to re-visit the documentation at https://chrissainty.com/getting-started-with-blazored-typeahead/
It still makes reference to @using Blazored.Typeahead.Forms

from typeahead.

@kiwiingenuity Yes, it's on my ever growing list of things to do :)

from typeahead.

I like the extension but the documentation is a bit behind. I don't understand what all the properties of the control do. I want OnValueChanged the selected items with some other parameters added. I thought something like ValueExpression="@(() => SelectedPerson, "foo", "bar")"

from typeahead.

Got it working:

<BlazoredTypeahead SearchMethod="@SearchCodes"
                    Value="SelectedItem"
                    ValueChanged="@(e => OnValueChanged(e, product.ProductId))"
                    TValue="CodeItem"
                    TItem="CodeItem"
                    ValueExpression="@(() => SelectedItem)"
                    Debounce="500"
                    placeholder="Search something...">
    <SelectedTemplate>
        @context.prop1
    </SelectedTemplate>
    <ResultTemplate>
        <div style="display: flex; flex-direction: row;">
            <div style="width: 100px; flex: initial;">@context.prop1</div>
            <div style="flex: 1;">@context.prop2</div>
            <div style="flex: 1; text-align: right;">€ @context.prop3</div>
        </div>
    </ResultTemplate>
    <NotFoundTemplate>
        No results
    </NotFoundTemplate>
</BlazoredTypeahead>

@{
    private CodeItem SelectedItem;

    private void OnValueChanged(CodeItem selected, Guid productId)
    {

    }

    private async Task<IEnumerable<CodeItem>> SearchCodes(string searchText)
    {
    }
}

from typeahead.

I'd go with a wiki, makes it a bit easier, I'll see what I can do later this week. I do want some input though, what should be in the wiki?

* Basic Usage

* Advanced Usage

* Best practises

* ... ?

• Link to working example
• Version changes or at least history of breaking changes
• Maybe examples with different types of binding and/or design patterns (this is what I am always complaining about with MS docs for UWP controls)

from typeahead.

I'm going to close this issue as the docs improvement are part of a wider issue covering all Blazored packages. The main tracker for this is https://github.com/Blazored/Home/issues/1

from typeahead.