Question

Here is my problem summarized in the following JS Fiddle :
http://jsfiddle.net/sidou/3R5B2/

I need to make an autocomplete field with multiple values (which is correctly done in the first part of the attached script) but I also want it to be accent insensitive when fetching the autocomplete suggestions compared to the input string (exactly as it works in the second part of the attached script).

How to merge both behaviors? or in other words, how to simply make the first autocomplete field accent insensitivewhile keeping the multiple values selection feature.

You can try it by typing the word “caféteria”

Thanks

Answer 1

Here, I fixed it for you: http://jsfiddle.net/cps7/3R5B2/7/. Second input acts as you wanted.

$(function() {
  var keywordz = [
    "Caféteria",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  //////////////FIRST AUTOCOMPLETE WITHOUT ACCENT CHECK///////////////

  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  $('#keywords')
    .keydown(function(e) {
      if (e.keyCode === $.ui.keyCode.TAB &&
        $(this).data("autocomplete").menu.active) {
        e.preventDefault();
      }
      if (e.which == 13) {
        e.preventDefault();
      }

      $('#keywords').autocomplete({

        minLength: 1,
        autoFocus: true,
        source: function(request, response) {
          // delegate back to autocomplete, but extract the last term
          response($.ui.autocomplete.filter(
            keywordz, extractLast(request.term)));
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function(event, ui) {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join(", ");
          return false;
        }

      })
    })
  //////////////END OF FIRST AUTOCOMPLETE WITHOUT ACCENT CHECK//////////

  //////////////SECOND AUTOCOMPLETE WITH ACCENT CHECK///////////////

  var accentMap = {
    "à": "a",
    "â": "a",
    "é": "e",
    "è": "e",
    "ê": "e",
    "ë": "e",
    "ï": "i",
    "î": "i",
    "ô": "o",
    "ö": "o",
    "û": "u",
    "ù": "u"
  };
  var normalize = function(term) {
    var ret = "";
    for (var i = 0; i < term.length; i++) {
      ret += accentMap[term.charAt(i)] || term.charAt(i);
    }
    return ret;
  };


  $('#keywords2')
    .keydown(function(e) {
      if (e.keyCode === $.ui.keyCode.TAB &&
        $(this).data("autocomplete").menu.active) {
        e.preventDefault();
      }
      if (e.which == 13) {
        e.preventDefault();
      }

      $('#keywords2').autocomplete({

        minLength: 1,
        autoFocus: true,
        //with accent check        
        source: function(request, response) {
          var matcher = new RegExp($.ui.autocomplete.escapeRegex(extractLast(request.term)), "i");
          response($.grep(keywordz, function(value) {
            value = value.truc || value.value || value;
            return matcher.test(value) || matcher.test(normalize(value));
          }));
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function(event, ui) {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join(", ");
          return false;
        }

      })
    })
  //////////////END OF SECOND AUTOCOMPLETE WITH ACCENT CHECK//////////
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
multi values autocomplete: <input type="text" id="keywords" size="50">
<br/><br/> accent insensitive autocomplete: <input type="text" id="keywords2" size="30">