Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
search-autocomplete.liquid snippet
{% comment %} Width of results box {% endcomment %}
{% assign results_box_width = '242px' %}
{% comment %} Background color of results box {% endcomment %}
{% assign results_box_background_color = '#ffffff' %}
{% comment %} Border color of results box {% endcomment %}
{% assign results_box_border_color = '#d4d4d4' %}
<!-- Some styles to get you started. -->
<style>
.search-results {
z-index: 8889;
list-style-type: none;
width: {{ results_box_width }};
margin: 0;
padding: 0;
background: {{ results_box_background_color }};
border: 1px solid {{ results_box_border_color }};
border-radius: 3px;
-webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
overflow: hidden;
}
.search-results li {
display: block;
width: 100%;
height: 38px;
margin: 0;
padding: 0;
border-top: 1px solid {{ results_box_border_color }};
line-height: 38px;
overflow: hidden;
}
.search-results li:first-child {
border-top: none;
}
.search-results .title {
float: left;
width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px;
padding-left: 8px;
white-space: nowrap;
overflow: hidden;
/* The text-overflow property is supported in all major browsers. */
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-align: left;
}
.search-results .thumbnail {
float: left;
display: block;
width: 32px;
height: 32px;
margin: 3px 0 3px 3px;
padding: 0;
text-align: center;
overflow: hidden;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment