autocomplete

jquery ui

by toubia95

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="ui-widget">
  <label for="jour">Date : </label>
  <input id="jour" size="50">
</div>

CSS

/* voir 
http://stackoverflow.com/questions/19177541/jquery-autocomplete-start-from-first-character
*/

Babel + JSX

$(function() {
      const availableTags = [
          'août',
          'avril',
          'brumaire',
          'décembre',
          'février',
          'floréal',
          'frimaire',
          'fructidor',
          'germinal',
          'janvier',
          'juillet',
          'juin',
          'mai',
          'mars',
          'messidor',
          'nivôse',
          'novembre',
          'octobre',
          'pluviôse',
          'prairial',
          'septembre',
          'thermidor',
          'vendémiaire',
          'ventôse'
      ];

      const split = (val) => {
        const result = val.split(/ \s*/);
        
        return result;
      }

      const extractLast = (term) => {
        const result = split(term).pop();
          
        return result;
      }

      $('#jour')
          .on('keydown', function(event) {
              $('#jour').autocomplete((event.keyCode === 32) || (event.keyCode === 8) ? 'disable' : 'enable');
              if (event.keyCode === $.ui.keyCode.TAB &&
                  $(this).autocomplete('instance').menu.active) {
                  event.preventDefault();
              }
          })
          .autocomplete({
              minLength: 1,
              source: function(request, response) {
                  var allterms = request.term.split(/[\s]+/);
                  var lastone = allterms[allterms.length - 1];
                  var matcher = new RegExp('^' + $.ui.autocomplete.escapeRegex(lastone), 'i');
                  response($.grep(availableTags, function(item) {
                      return matcher.test(item);
                  }));
              },
              focus: function() {
                  return false;
              },
              select: function(event, ui) {
                  var terms = split(this.value);
                  terms.pop();
                  terms.push(ui.item.value);
                  terms.push('');
                  this.value = terms.join(' ');
                 ...