jQuery重音不敏感，具有多个值自动完成 [英] Jquery accent insensitive with multiple values autocomplete

问题描述

这是我的问题，总结在以下JS Fiddle中: http://jsfiddle.net/sidou/3R5B2/

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.

您可以通过键入caféteria"一词来尝试

You can try it by typing the word "caféteria"

谢谢

推荐答案

在这里，我为您修复了此问题:

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">

这篇关于jQuery重音不敏感，具有多个值自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！