jQuery的口音与多个值不敏感的自动完成

Question

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

我需要与多个值的自动完成字段（这是正确的连接脚本的第一部分完成），但我也希望它在获取与输入字符串相比较的自动填充建议时（与它在附加脚本的第二部分中的工作原理完全相同）时不区分变音。

如何合并两种行为？或者换句话说，如何简单地使第一个自动补全字段变得不重要，同时保持多值选择特征。

您可以通过键入单词“食堂”

感谢

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