[multipleChoiceList] create widget

[vvo]

This widget needs to be able to render this:

API

Given this html:

<div id="manufacturer"></div>

And this JavaScript:

instant.addWidget(
  instantsearch.widgets.multipleChoiceList({
    container: '#manufacturer',
    facetName: 'manufacturer'
  })
)

Default rendering output (no provided template):

<ul class="as--multipleChoiceList">
  <li><label><input type="checkbox" value="Sony" checked />Sony <span>302</span></label></li>
  <li><label><input type="checkbox" value="Microsoft" />Microsoft <span>120</span></label></li>
</ul>

<label> is important to allow clicking on the "Sony" label rather than just the checkbox. This is also the standard way bootstrap advocates writing checkboxes.

I did not detail css classes but there should be css classes aroud elements for people to style them. Following #47?

Options

• container string or DOMElement
• facetName string
• template string (hogan) or function

Available data when passing your own template

Template will be inserted <li>HERE</li>

• value string
• count number
• selected boolean

Default sort

By default we can sort by name.

Once we are able to sort the facet values (algolia/algoliasearch-helper-js#178) then we can provide the option here.

[vvo]

We need to be able to indicate

instant.addWidget(
  instantsearch.widgets.chooseMany({
    attribute: 'category.name',
    type: 'AND' // conjunctive
    // type: 'OR' // disjunctive
  })
)

cc @maxiloc

[maxiloc]

For me it makes more sense to separate conjunctive and disjunctive into two widgets. As it might not be the same template.

[bobylito]

This component is a list so the name should reflect that. Also the final user make multiple choices. So I propose to rename it to multipleChoiceList

[bobylito]

Humm the and/or question is tricky. On one hand I would say that it's not the user concern, he only wants to do the UI. But on the other hand they might want to do it when (very borderline case) they have arrays for the conjuctive facet attribute...

Imho, for now let's now provide the option and consider it's for disjunctive facetting only.

What do you think? (no strong feelings :P)

[redox]

I think we should really not include a new wording here. All UI components I used were always speaking about "facet" (that's definitely not too technical). I'm OK to not expose the "conjunctive/disjunctive" words which are hard to understand but I would really not use "chooseMany".

Proposal:

instant.addWidget(
  instantsearch.widgets.facetList({
    attribute: 'category.name',
    type: 'checkbox' // link, radio
  })
)

[vvo]

For me it makes more sense to separate conjunctive and disjunctive into two widgets. As it might not be the same template.

@maxiloc You will be able to pass a template to the widget of course.

[vvo]

All UI components I used were always speaking about "facet"

Which one @redox. I am not against having facetList but everything is a facet (slider, switch) so I am not sure it makes more sense.

Also I am against type: 'checkbox' or link, radio. Because it will not answer all use cases. We can have checkboxes by default then provide a template option that will be able to solve all other use cases.

What do you think?

[vvo]

So I propose to rename it to multipleChoiceList

This is a good name and I like it. Very descriptive, no question about the usage of the widget.

I updated the API Proposal (top description of this page) for this widget, please read it before replying.