Improve the docs

[chrissainty]

The new version has a lot of new features and the docs need to be made better so people can discover and understand them better. Also a demo would be a good idea!

[rgamage]

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

[chrissainty]

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

[rgamage]

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.

[chrissainty]

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.

[rgamage]

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!

[fnils]

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')

[chrissainty]

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

[fnils]

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.

[chrissainty]

@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.

[kiwiingenuity]

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

[chrissainty]

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

[LockTar]

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")"

[LockTar]

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)
    {
    }
}

[vertonghenb]

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
• ... ?

[MadTiger2409]

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)

[chrissainty]

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