search encours

by toubia95

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<form target='_blank' role='search' method='get' class='search-form' action='https://www.ortolang.fr/market/search' id='ortosearch'>
 <label>
  <span class='screen-reader-text'>Chercher</span>
  <input 
   type='search' 
   class='market-search-field' 
   id='marketsearchbox' 
   placeholder='Rechercher' 
   value='' 
   name='content' 
   autocomplete='off' / >
 </label>
 <input type='hidden' id='filters' name='filters' value='{}'>
 <input type="submit" value="Envoyer"  style="display: none;">
</form>

CSS

#marketsearchbox {
  width: 100%;
}

/* Typeahead CSS
 * from https://github.com/bassjobsen/typeahead.js-bootstrap-css */
span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
  cursor: pointer;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
span.twitter-typeahead .tt-suggestion {
  display: block;
  padding: 5px 20px;
  clear: both;
  font-weight: normal;
  line-height: 2;
  color: #333333;
  white-space: nowrap;
}
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
  /* color: #ffffff; */
  color: #333333;
  text-decoration: none;
  outline: 0;
  
  /* background-color: #ff9800; */
  background-color: #f8f8f8;
}
.input-group.input-group-lg span.twitter-typeahead .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.input-group.input-group-sm span.twitter-typeahead .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
span.twitter-typeahead {
  width: 100%;
}
.input-group span.twitter-typeahead {
  display: block !important;
  height: 34px;
}
.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu {
  top: 32px !important;
}
.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
  border-radius: 0;
}
.input-group span.twitter-typeahead:first-child .form-control {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
 ...

JavaScript

jQuery(document).ready(function ($) {

/*************************
* SEARCH SUGGESTIONS *****
*************************/

// https://twitter.github.io/typeahead.js/
var ressources = new Bloodhound({
  datumTokenizer: function datumTokenizer(datum) {
    return Bloodhound.tokenizers.whitespace(datum.label_fr);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url:
      "https://repository.ortolang.fr/api/search/suggest?label_fr.autocomplete*=%QUERY&size=6",
    wildcard: "%QUERY",
    filter: function filter(ressources) {
      return $.map(ressources.hits, function (ressource) {
        return {
          path: JSON.parse(ressource).path,
          id: JSON.parse(ressource).id,
          type: JSON.parse(ressource).type,
          key: JSON.parse(ressource).key,
          label_fr: JSON.parse(ressource).label_fr,
          label_en: JSON.parse(ressource).label_en,
        };
      });
    }
  }
});
ressources.initialize();
  
  $('#marketsearchbox').typeahead({
    hint: true,
    highlight: true,
    minLength: 2,
  }, {
    name: 'ressources',
    source: ressources.ttAdapter(),
    displayKey: 'label_fr',
    display: function(datum){ 
     return datum.label_fr; // personnalisable
    },
    templates: {
      suggestion: function(datum) { 
        let icon = ""; let english = "";
        switch (true) {
  				case /corpus/i.test(datum.type):
    				icon = "book";
    			break;
          case /lexique/i.test(datum.type):
    				icon = "quote-right";
    			break;
          case /terminologie/i.test(datum.type):
    				icon = "font";
    			break;
          case /outil/i.test(datum.type):
    				icon = "cubes";
    			break;
          case /organization/i.test(datum.type):
          	icon = "graduation-cap";
    			break;
          case /application/i.test(datum.type):
    				icon = "briefcase";
    			break;
  				default:
    				icon = "book";
				}
        /*
        if (datum.label_en) {
        	english = '...