Jquery нечувствителен к акценту с несколькими значениями автозаполнения - PullRequest
Новая
       2

Jquery нечувствителен к акценту с несколькими значениями автозаполнения

1 голос
/ 15 марта 2012

Вот моя проблема, кратко изложенная в следующей JS Fiddle: http://jsfiddle.net/sidou/3R5B2/

Мне нужно создать поле автозаполнения с несколькими значениями (что правильно сделано в первой части присоединенного скрипта), но я такжехотите, чтобы он был нечувствительным к акценту при извлечении предложений автозаполнения по сравнению со строкой ввода (точно так же, как это работает во второй части присоединенного скрипта).

Как объединить оба поведения?или, другими словами, как просто сделать первое поле автозаполнения нечувствительным к акценту при сохранении функции выбора нескольких значений.

Вы можете попробовать это, набрав слово «caféteria»

Спасибо

1 Ответ

3 голосов
/ 15 марта 2012

Здесь я исправил это для вас: http://jsfiddle.net/cps7/3R5B2/7/. Второй ввод действует так, как вы хотели. 

$(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">
...