开发者

jQuery Autocomplete with Special Characters (i.e. ö, Ä, é, or ß)

开发者 https://www.devze.com 2023-01-29 13:39 出处:网络
How can I have autocomplete match on words with special characters, such as t开发者_Python百科hose in German: ö, Ä, é, or ß. For example, I\'d like \"mun\" to match \"München\" and \"Munchen\".Th

How can I have autocomplete match on words with special characters, such as t开发者_Python百科hose in German: ö, Ä, é, or ß. For example, I'd like "mun" to match "München" and "Munchen".


There's an excellent article on this at A List Apart which includes some Javascript code

var accentMap = {
  'á': 'a',
  'é': 'e',
  'í': 'i',
  'ó': 'o',
  'ú': 'u'
};

function accent_fold(s) {
  if (!s) {
    return '';
  }
  var ret = '';
  for (var i = 0; i < s.length; i++) {
    ret += accent_map[s.charAt(i)] || s.charAt(i);
  }
  return ret;
};


I use typeahead, and after hours of banging my head against a wall it was as simple as using utf8_encode on the script that returns the JSON:

utf8_encode(stripslashes($variable));


jQuery UI has a demo for this problem (accent folding) on their site: https://jqueryui.com/autocomplete/#folding

$(function() {
  var names = ["Jörn Zaefferer", "Scott González", "John Resig"];

  var accentMap = {
    "á": "a",
    "ö": "o"
  };
  var normalize = function(term) {
    var ret = "";
    for (var i = 0; i < term.length; i++) {
      ret += accentMap[term.charAt(i)] || term.charAt(i);
    }
    return ret;
  };

  $("#developer").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(names, function(value) {
        value = value.label || value.value || value;
        return matcher.test(value) || matcher.test(normalize(value));
      }));
    }
  });
});

0

精彩评论

暂无评论...
验证码 换一张
取 消