Built-in column layout about autocomplete HOT 15 CLOSED

We should just keep in mind than horizontal layouts often look like:

For standard horizontal layout, CSS is enough to be able to make it. But it can make sense to still handle it:

$('#search-input').autocomplete({
  templates: {
    dropdownMenu: '#my-custom-menu'
    // or
    dropdownMenu: 'vertical' // default
    // or
    dropdownMenu: 'horizontal' // datasets with float: left
    // or
    dropdownMenu: '1-2' // 2 columns: 1st dataset then 2nd+3rd datasets
  }
}, [ /* [...] */ ]);

from autocomplete.

Yes I like your proposition a lot !

from autocomplete.

Hmm, I would not put the columning in the template. As you said, CSS can take care of that (as we now have the ability to define the master template, holding the datasets, as well as each dataset).

I would rather specify where a dataset is located (in the grid) when defining it. This will help in handling keyboard navigating (up, down, right and left).

// Dataset configuration
{
  name: 'DATASET1',
  column: 1
},
{
  name: 'DATASET2',
  column: 2,
  line: 1
},
{
  name: 'DATASET3',
  column: 2,
  line: 2
}

from autocomplete.

Ah yes, looks very good like that @pixelastic :) Should we go for a table-based layout since we'll not control the CSS grid used?

from autocomplete.

Hmm, no I would let the actual rendering of the grid to the user. Table-based, bootstrap grid, custom float/inline-block, anything can then be used.

from autocomplete.

Hmm, no I would let the actual rendering of the grid to the user. Table-based, bootstrap grid, custom float/inline-block, anything can then be used.

So what would it look like from an API POV? Because the idea was to propose an API with some "default" templates.

from autocomplete.

I would read the column / line attributes of the dataset and generate a markup along the line of:

<div class="aa-wrapper">
  <div class="aa-column-1">
    <div class="aa-column-1-line-1">
      <div class="aa-dataset-dataset1"></div>
    </div>
  </div>
  <div class="aa-column-2">
    <div class="aa-column-2-line-1">
      <div class="aa-dataset-dataset2"></div>
    </div>
    <div class="aa-column-2-line-2">
      <div class="aa-dataset-dataset3"></div>
    </div>
  </div>
</div>

Something like that. Not sure on the details. Maybe we could merge the lines with the dataset wrapper.

Going form here we could either just provide such classes so users will style them as they see fit (using float, table-cell or whatever), or we could also add more generic classes and supply the default CSS to make it look like a multicolumn.

The reason I would not go with a <table>-based markup is that it will add some default style and behavior that will be hard to overwrite in CSS. Using only <div> lets the final user style it as he wants.

I guess we should provide a base css file with the default styles to make it look like not to ugly (like position:absolute, columning, highlighting and so on), but imply that the user should override them as needed.

from autocomplete.

Oh OK, now I get it; so the user will need to write the associated CSS. It's not OOTB but definitely OK, LGTM 👍

from autocomplete.

@pixelastic Do we need a line attribute ? Can we just have kind of a stack for each collumn, the first in the array with collumn 1 will be on line 1, second with collumn 1 on line 2 and so on ?

from autocomplete.

Just to clarify things: we are going to propose a column/line API only to be able to handle the right left keys, right?

I would not complexify the API for such use case, but rather:

• only up/down keys would work, we would stilll be able to go to column 2, when end of column 1 reached
• provide CSS examples to do an horizontal + vertical menu

what do you think?

from autocomplete.

@maxiloc: Might not be necessary, you're right.

@vvo: Yes, that is the idea. Being able to move accross columns with right and left keys. I think the more we create multi-column layout, the more we will want to be able to navigate on the keyboard (well, if we provide up/down, makes sense to also provide right/left). This might not be a priority feature, but I feel like the implementation would miss a bit of polish if we don't provide it.

from autocomplete.

we are going to propose a column/line API only to be able to handle the right left keys, right?

No, at the beginning it was just to be able to display datasets with a (more) complex layout. Handling right/left keys is indeed a good nice to have.

from autocomplete.

provide CSS examples to do an horizontal + vertical menu

CSS rules are not always enough if we keep the current DOM structure.

from autocomplete.

Do we have an example autocomplete menu where CSS is not enough?

from autocomplete.

Yes, the one I provided when dataset1 is smaller than dataset2:

In such case you, having one dataset after another:

<div class="aa-dataset-1"></div>
<div class="aa-dataset-2"></div>
<div class="aa-dataset-3"></div>

cannot keep the dataset-3 on the right; you need:

<div class="left-wrapper" style="float: left">
  <div class="aa-dataset-1"></div>
</div>
<div class="right-wrapper" style="float: left">
  <div class="aa-dataset-2"></div>
  <div class="aa-dataset-3"></div>
</div>

from autocomplete.