2 column layout

Use CSS to transform line layout into 2 columns, one showing products, the other one showing categories and brands.

<script>
function LBInitAutocomplete() {
  AutoComplete({
    Layout: 'line',
    TrackerId: '179075-204259',
    Locale: 'en',
    Translations: {
      en: {
        types: {
          item: {
            name: "Products",
            heroName: "Top product"
          },
          query: {
            name: "Searches"
          },
          category: {
            name: "Categories"
          }
        }
      }
    },
    Types: [
      {
        type: 'product',
        size: 4
      },
      {
        type: 'query'
      },
      {
        type: 'category',
        size: 2
      }
    ]
  }, '#q')
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>

<style>
.luigi-ac-main {
  position: relative;
  float: left;
  width: 70%;
  background: #f7f7f8 !important;
}

.luigi-ac-others {
  position: relative;
  float: right;
  width: 30%;
  margin-top: 0;
}

.luigi-ac-line .luigi-ac-footer {
  position: relative;
  margin-top: 452px;
}
</style>
Previous example
Basic example
Line layout examples

Try it out →
Next example
Basic example
Grid layout examples

Try it out →