2017-02-10 41 views
0

我有大約50個隱藏的div我想通過關鍵字匹配進行排序。爲了簡化示例,我目前只顯示兩個。該腳本適用於英語,但是當您對某些單詞進行本地化時,它們可能包含重音符號,這會破壞腳本找到匹配結果的能力。例如:用西班牙語打字的電話不符合teléfono。我看到一些例子,其中重音從一個字符串中刪除,但是如何從所有字符串中刪除它們?jQuery更改多個文本字符串以刪除所有的重音

<form action="" class="styled" id="live-search" method="post"> 
    <fieldset> 

     <p style="padding-left: 10px; padding-top: 5px;">Start typing to filter.</p> 
     <input class="text-input" id="filter" style="margin-top: -60px;" type="text" value="" /> 
     <div id="filter-count"></div> 
    </fieldset> 
</form> 

<div> 
<p class="listheaders"><strong>Phones:</strong></p> 
    <ul class="vglist"> 
    <li class="listitems"><a href="/en/node/38871" target="_blank">Téléphone Android Nexus 5x<br /> 
    <img src="someImagePathEtc" width="100" /> </a> <span style="display: none;">teléfono phone nexus 5x</span></li> 
    <li class="listitems"><a href="/en/node/33302" target="_blank">Einlösen von Geschenkkarten<br /> 
    <img src="someImagePathEtc" width="100" /></a> <span style="display: none;">gift cards</span></li> 
    </ul> 
</div> 

<script> 
$(document).ready(function(){ 
    $("#filter").keyup(function(){ 

     // Retrieve the input field text and reset the count to zero 
     var filter = $(this).val(), count = 0; 

     // Loop through the visual guide list 
     $(".vglist li").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
       $(this).fadeOut("slow"); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $(this).show(); 
       count++; 
      } 
     }); 

     // Update the count 
     var numberItems = count; 
     $("#filter-count").html("&nbsp;&nbsp;&nbsp;Number of Guides: "+count); 
    }); 
}); 
</script> 

我需要更新下面的提琴,使它匹配與我們沒有重音的我們鍵入的字符。謝謝

https://jsfiddle.net/jeremyperson/kp2nmm31/

+3

[程序化還原Accent在JavaScript的(又名文本規範化或unaccenting)](的可能的複製http://stackoverflow.com/questions/227950/programatic-accent-reduction-in-javascript -aka-text-normalization-or-unaccentin) – aquinas

+0

我無法添加評論,因爲我的信譽,但你可以看到這個:http://stackoverflow.com/questions/11115417/string-search-that-ignores-accented-characters –

回答

0

下面是我最終使用它是否有助於在未來的人。

$(document).ready(function(){ 
    $("#filter").keyup(function(){ 

     // Retrieve the input field text 

// replace each of the English vowels with all the accentuated equivalents, including the plain English version. 
     var filter = $(this).val().replace(/a/g,'[áaàäâ]') 
               .replace(/e/g,'[éeèëê]') 
               .replace(/i/g,'[íiìïî]') 
               .replace(/o/g,'[óoòöô]') 
               .replace(/u/g,'[úuùüû]') 
               .replace(/n/g,'[ñn]') 
               ; 
     // reset the count to zero 
     var count = 0; 

     // Loop through the visual guide list 
     $(".vglist li").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
       $(this).fadeOut("slow"); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $(this).show(); 
       count++; 
      } 
     }); 

     // Update the count 
     var numberItems = count; 
     $("#filter-count").html("&nbsp;&nbsp;&nbsp;Number of Guides: "+count); 
    }); 
}); 

https://jsfiddle.net/kp2nmm31/2/

相關問題