Github_repo_Search

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>
<div data-am-header>
  <div data-am-search>
    <input type="search" name="Search" class="search__input" placeholder="Search on git" />
    <span class="search-clear">x</span>
  </div>
  <input type="hidden" id="search-count-hidden" />
</div>

CSS

[data-am-header] {
  background-color: #dddddd;
  padding: 20px;
}

[data-am-search] {
  position: relative;
}
[data-am-search].open .search__input {
  border-radius: 3px 3px 0 0;
}
[data-am-search] .twitter-typeahead {
  width: 100%;
}
[data-am-search] .search__input {
  position: relative;
  border: 1px solid #ededed;
  border-radius: 3px;
  padding: 10px;
  width: 100%;
  z-index: 102;
}
[data-am-search] .search-item--footer, [data-am-search] .search-item--empty, [data-am-search] .search-item {
  border: 1px solid #dddddd;
  border-top-color: #ffffff;
  padding: 0.6em;
  transition: all 0.2s ease;
}
[data-am-search] .search-item {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  position: relative;
}
[data-am-search] .search-item:hover {
  border: 1px solid orange;
}
[data-am-search] .search-item--empty {
  background-color: #ffffff;
}
[data-am-search] .search-item--footer {
  border-top-width: 0;
  background-color: #ededed;
}
[data-am-search] .search-item--footer a {
  color: #000000;
}
[data-am-search] .search-item__image {
  height: 62px;
  width: 62px;
  margin-right: 0.6em;
}
[data-am-search] .search-item__content {
  min-width: 0;
  flex: 1;
  width: 100%;
  line-height: 1.6em;
}
[data-am-search] .search-item__content .content {
  display: block;
  height: 62px;
}
[data-am-search] .search-item__content .block {
  display: block;
  font-size: 1.1em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
[data-am-search] .search-item__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[data-am-search] .search-clear {
  position: absolute;
  background-color: #dddddd;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  height: 1.2em;
  line-height: 1.2em;
  width: 1.2em;
  top: 0.6em;
  right: 0.6em;
  z-index: 105;
  transition: all 0.2s ease;
  font-weight: bold;
}
[data-am-search] .search-clear:hover {
  cursor: pointer;
  transform: scale(0.9);
}
[data-am-search] .tt-menu {
 ...

JavaScript

var carData = new Bloodhound({
  remote: {
    url: 'https://api.github.com/users/%QUERY/repos',
    wildcard: '%QUERY',
    filter: function(list) {
      $('#search-count-hidden').val(list.length);
      return list;
    }
  },
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace
});

var footer = function(context) {
  return '<div class="search-item--footer"><a href="" class="search-item__footer-link">Visa fler <span class="search-item__amount">(st)</span></a></div>';
}

var $searchContainer = $('[data-am-search]');
var $typeahead = $('[data-am-search] .search__input');
$typeahead.typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'cars',
  display: 'full_name',
  limit: 3,
  source: carData,
  templates: {
    notFound: [
      '<div class="search-item--empty">no result</div>'
    ],
    footer: footer,
    suggestion: Handlebars.compile('<div class="search-item"><img src="{{owner.avatar_url}}" alt="" class="search-item__image" /> <div class="search-item__content"><div class="content"><strong class="block">{{full_name}}</strong>{{owner.id}}</div></div><a href="#" class="search-item__link"></a></div>')
  }
});

$typeahead.bind('typeahead:close', function(ev, suggestion) {
  //$typeahead.typeahead('val', '');
});

$typeahead.bind('typeahead:select', function(ev, suggestion) {
  window.location.href = suggestion.url;
});

$typeahead.bind('typeahead:render', function(ev, suggestions, flag, dataset) {
  $('.search-item__amount').html($('#search-count-hidden').val());
});

$('.search-clear').on('click', function() {
  $typeahead.typeahead('val', '');
});