带有重音折叠和链接的自动完成 jquery答案

【问题标题】：Autocomplete jquery with accent folding and links带有重音折叠和链接的自动完成 jquery
【发布时间】：2015-10-27 12:04:27
【问题描述】：

您好，我的页面上有这个自动完成的 jquery 脚本：

 var source = [ { value: "http://www.bata.com",  
                  label: "Baťa"  
                 },  
                { value: "http://www.bata.com",  
                  label: "Bata"  
                 },  
             ];  


$(document).ready(function() {   
    $("input#autocomplete").autocomplete({  
       source: source,    
       select: function( event, ui ) {   
        window.location.href = ui.item.value;  
       }  
    });  
});

<input id="autocomplete" />

而且一切都可以，但我想在此代码中添加 accent fold，如下所示： https://jqueryui.com/autocomplete/#folding

因为，当我在输入框中写：
“bata”自动完成显示：Bata
“baťa”自动完成显示：Baťa

我想要这个：当我在输入框中写：
“bata”自动补全显示：Bata、Baťa

感谢

【问题讨论】：

也许您唯一需要做的就是将您的第一个标签编辑为“Bata, Baťa”。（并且可能删除第二个。）
问题是，在我的列表中有很多带有标点符号的项目：Bata、Baťa、Košele、Jönh、Jober.... 我不想删除标点符号
我的建议是像这样调整标签“Bate”：“Bata, Baťa”。你会得到你需要的。
检查这个页面，并尝试写“jo”：jqueryui.com/autocomplete/#folding

标签： jquery jquery-ui autocomplete jquery-autocomplete

【解决方案1】：

在link内，点击查看源码显示用法。

它是如何为您工作的：-

 var source = [ { value: "http://www.bata.com",  
                  label: "Baťa"  
                 },  
                { value: "http://www.bata.com",  
                  label: "Bata"  
                 },  
             ];

var accentMap = {
      "á": "a",
      "ö": "o",
      "ť": "t"
      // ADD MORE HERE
    };

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

$("input#autocomplete").autocomplete({  
    source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response($.grep(source, function(value) {
            return matcher.test(value.label) || matcher.test(normalize(value.label));
        	}) 
        );
    },
    select: function( event, ui ) {   
        window.location.href = ui.item.value;  
    }  
});

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input id="autocomplete" />

【讨论】：