Question

以下是我在以下JS小提琴中总结的问题： http://jsfiddle.net/sidou/3R5B2/

我需要创建一个具有多个值的自动完成字段（在附加脚本的第一部分中正确完成）但我还希望在获取与输入字符串相比的自动完成建议时，它对重音不敏感（就像它一样）适用于所附脚本的第二部分。）

如何合并两种行为？或换句话说，如何在保持多值选择功能的同时简单地使第一个自动完成字段重音不敏感。

您可以输入“caféteria”一词来试试

由于

Answer 1

在这里，我为你修好了：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">

Jquery重音不敏感，具有多个值自动完成功能

1 个答案: