的JavaScript自動完成事先鍵入的內容匹配的口音和波浪線發出

我使用Typeahead jQuery庫，但是當用戶鍵入一個聲音就像e它應該與外國聲樂太像é，ë，è。的JavaScript自動完成事先鍵入的內容匹配的口音和波浪線發出

匹配n與ñ也是。

這是我的代碼：

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="typeahead.css"> 
    <script src="jquery-1.11.0.min.js"></script> 
    <script src="typeahead.bundle.min.js"></script> 
</head> 
<body> 
    <center> 
     <div id="nombre"> 
      <input class="typeahead" type="text" placeholder="Nombre"> 
     </div> 
    </center> 
    <script> 
     var charMap = { 
      "à": "a", 
      "á": "a", 
      "ä": "a", 
      "è": "e", 
      "é": "e", 
      "ë": "e", 
      "ì": "i", 
      "í": "i", 
      "ï": "i", 
      "ò": "o", 
      "ó": "o", 
      "ö": "o", 
      "ù": "u", 
      "ú": "u", 
      "ü": "u", 
      "ñ": "n"}; 
     var normalize = function (input) { 
      $.each(charMap, function (unnormalizedChar, normalizedChar) { 
       var regex = new RegExp(unnormalizedChar, 'gi'); 
       input = input.replace(regex, normalizedChar); 
      }); 
      return input; 
     } 
     var substringMatcher = function(strs) { 
     return function findMatches(q, cb) { 
      var matches, substringRegex; 
      matches = []; 
      substrRegex = new RegExp(q, "i"); 
      $.each(strs, function(i, str) { 
       if (substrRegex.test(str)) { 
       matches.push({ value: str }); 
       } 
      }); 
      cb(matches); 
      }; 
     }; 
     var nombres = ["Sánchez", "Árbol", "Müller", "Ératio", "Niño"]; 
     $("#nombre .typeahead").typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 
      name: "nombres", 
      displayKey: "value", 
      source: substringMatcher(nombres) 
     }); 
    </script> 
</body>

我怎樣才能做到這一點？

謝謝！

來源

2014-03-30 candlejack

請在這裏看到答案http://stackoverflow.com/a/22493881/203371 –

@新鮮，你可以重新檢查我的問題嗎？我添加了更多的代碼。謝謝！ – candlejack

TypeError：input.replace不是函數 \t input = input.replace（regex，normalizedChar）; – candlejack

我寫了下面的的jsfiddle的解決方案：

http://jsfiddle.net/Fresh/F3hG9/

解決方案的關鍵部分是標準化用於搜索和也包括將用於原名稱的名稱顯示目的;

var nombres = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: queryTokenizer, 
    local: $.map(names, function (name) { 
     // Normalize the name - use this for searching 
     var normalized = normalize(name); 
     return { 
      value: normalized, 
      // Include the original name - use this for display purposes 
      displayValue: name 
     }; 
    }) 
});

它是與西方替代「洋」字代替了normailze功能（如下圖所示）：

var normalize = function (input) { 
    $.each(charMap, function (unnormalizedChar, normalizedChar) { 
     var regex = new RegExp(unnormalizedChar, 'gi'); 
     input = input.replace(regex, normalizedChar); 
    }); 
    return input; 
};

我省略了，你可以在「本地」下面的定義見本爲了簡潔起見，charMap（它決定了外部角色映射到的西方角色）;你可以在小提琴中找到列表。

來源

2014-03-31 21:38:04

非常感謝你，男人，你救了我的一天！ – candlejack

我有一個問題，我使用typeahead版本。 * 0.10.0 *因爲[fastclick]（https://github.com/ftlabs/fastclick）會干擾0.10.0版本的較新版本，問題是當我「點擊」一個建議時，它不會自動完成輸入。不幸的是，你在預輸入腳本0.10.0版本的原因我這個錯誤： '遺漏的類型錯誤：無法調用undefined' 方法「空白」：'（有任何想法如何解決這個問題 – candlejack

？如果你在我的例子中，請確保你在你的網站中引用了typeahead.js包（這包括typeahead和bloodhound建議引擎），同時確保「local」函數傳回帶有「value」鍵值對 –

的JavaScript自動完成事先鍵入的內容匹配的口音和波浪線發出

回答

相關問題