<commit_before><input type="search" id="autocomplete-dataset" class="form-control" placeholder="Search for vacation rentals or cities" />

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.js"></script>
<style>
.algolia-autocomplete {
  width: 100%;
}
.ad-example-dropdown-menu {
  width: 100%;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 5px;
  padding: .5em;
  box-shadow: 1px 1px 32px -10px rgba(0,0,0,0.62);
}
.ad-example-dropdown-menu .ad-example-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.ad-example-dropdown-menu .ad-example-suggestion img {
  height: 2em;
  margin-top: .5em;
  margin-right: 10px;
  float: left;
}
.ad-example-dropdown-menu .ad-example-suggestion small {
  font-size: .8em;
  color: #bbb;
}
.ad-example-dropdown-menu .ad-example-suggestion.ad-example-cursor {
  background-color: #B2D7FF;
}
.ad-example-dropdown-menu .ad-example-suggestion em {
  font-weight: bold;
  font-style: normal;
}
.ad-example-header {
  font-weight: bold;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #ccc;
}
</style>
<%= javascript_include_tag config[:places_autocomplete_dataset_lib_url] %>
<script>
(function() {
  var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
  var index = client.initIndex('airbnb');

  // create the first autocomplete.js dataset: vacation rentals
  var rentalsDataset = {
    source: autocomplete.sources.hits(index, {hitsPerPage: 2}),
    displayKey: 'name',
    name: 'rentals',
    templates: {
      header: '<div class="ad-example-header">Vacation rentals</div>',
      suggestion: function(suggestion) {
        return '<div class="ad-example-suggestion">' +
          '<img src="' + suggestion.thumbnail_url + '" />' +
          '<div>' +
            suggestion._highlightResult.name.value + '<br />' +
            '<small>' + suggestion._highlightResult.city.value + '</small>' +
          '</div>' +
          '</div>';
      }
    }
  };

  // create the second dataset: places
  // we automatically inject the default CSS
  // all the places.js options are available
  var placesDataset = placesAutocompleteDataset({
    algoliasearch: algoliasearch,
    templates: {
      header: '<div class="ad-example-header">Cities</div>'
    },
    hitsPerPage: 3
  });

  // init
  var autocompleteInstance = autocomplete(document.querySelector('#autocomplete-dataset'), {
    hint: false,
    debug: true,
    cssClasses: {prefix: 'ad-example'}
  }, [
    rentalsDataset,
    placesDataset
  ]);
<commit_msg>docs(autocomplete): fixing example to correctly return suggestion from rental set<commit_after><input type="search" id="autocomplete-dataset" class="form-control" placeholder="Search for vacation rentals or cities" />

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.js"></script>
<style>
.algolia-autocomplete {
  width: 100%;
}
.ad-example-dropdown-menu {
  width: 100%;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 5px;
  padding: .5em;
  box-shadow: 1px 1px 32px -10px rgba(0,0,0,0.62);
}
.ad-example-dropdown-menu .ad-example-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.ad-example-dropdown-menu .ad-example-suggestion img {
  height: 2em;
  margin-top: .5em;
  margin-right: 10px;
  float: left;
}
.ad-example-dropdown-menu .ad-example-suggestion small {
  font-size: .8em;
  color: #bbb;
}
.ad-example-dropdown-menu .ad-example-suggestion.ad-example-cursor {
  background-color: #B2D7FF;
}
.ad-example-dropdown-menu .ad-example-suggestion em {
  font-weight: bold;
  font-style: normal;
}
.ad-example-header {
  font-weight: bold;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #ccc;
}
</style>
<%= javascript_include_tag config[:places_autocomplete_dataset_lib_url] %>
<script>
(function() {
  var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
  var index = client.initIndex('airbnb');

  // create the first autocomplete.js dataset: vacation rentals
  var rentalsDataset = {
    source: autocomplete.sources.hits(index, {hitsPerPage: 2}),
    displayKey: 'name',
    name: 'rentals',
    templates: {
      header: '<div class="ad-example-header">Vacation rentals</div>',
      suggestion: function(suggestion) {
        return '<img src="' + suggestion.thumbnail_url + '" />' +
          '<div>' +
            suggestion._highlightResult.name.value + '<br />' +
            '<small>' + suggestion._highlightResult.city.value + '</small>' +
         '</div>';
      }
    }
  };

  // create the second dataset: places
  // we automatically inject the default CSS
  // all the places.js options are available
  var placesDataset = placesAutocompleteDataset({
    algoliasearch: algoliasearch,
    templates: {
      header: '<div class="ad-example-header">Cities</div>'
    },
    hitsPerPage: 3
  });

  // init
  var autocompleteInstance = autocomplete(document.querySelector('#autocomplete-dataset'), {
    hint: false,
    debug: true,
    cssClasses: {prefix: 'ad-example'}
  }, [
    rentalsDataset,
    placesDataset
  ]);

{'fraction_non_alphanumeric': 0.1519865067466267, 'fraction_numerical': 0.022113943028485756, 'mean_word_length': 3.542127659574468, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '530085', 'n_tokens_mistral': 1925, 'n_tokens_neox': 1810, 'n_words': 366}