typeahead.js 使用記録_html/css_WEB-ITnose

Github アドレス: https://github.com/twitter/typeahead.js

aceAdmin インターフェイス テンプレートには、先行入力コントロールがあり、バージョン番号は 0.10.2 です。このバージョンは minLength:0 パラメーターに対して無効ですそこで、github に行って、置き換える新しいバージョン 0.11.1 を見つけ、使用中のメモをここに記録します

基本コード

 var gameNameList = ['abc', 'abd', 'cde', 'xyz'];            var gameNameMatcher = function(strs) {                return function findMatches(q, cb) {                    var matches, substrRegex;                    // an array that will be populated with substring matches                    matches = [];                    // regex used to determine if a string contains the substring `q`                    substrRegex = new RegExp(q, 'i');                    // iterate through the pool of strings and for any string that                    // contains the substring `q`, add it to the `matches` array                    $.each(strs, function(i, str) {                        if (substrRegex.test(str)) {                            matches.push({value:str});                        }                    });                    cb(matches);                };            };            $('#Name').typeahead({                hint: true,                highlight: true,                minLength: 0            }, {                name: 'gameNameList',                displayKey: 'value',                source: gameNameMatcher(gameNameList)            });

注: github の例では、displayKey 行、matches.push はありません。コードは ({Value:str}) ではなく (str) です。その結果、一致リストには未定義のみが表示されます。

minLength パラメータが 0 の場合、入力ボックスをクリックするとリストが自動的にポップアップ表示されます。これは、オプションがあまりない状況に適しています。

aceAdmin で使用すると、枠線のないリストなどの表示異常が発生します。理由は、ace.css を変更することで解決しました。

1 tt-dropdown- を変更します。 menu を tt-menu に追加します

2 css のセクションを追加します

.tt-suggestion:hover {  cursor: pointer;  color: #fff;  background-color: #0097cf;}

最後に、バージョンの問題について触れておきたいと思います。このコントロールは何度もアップグレードされ、最終的にブートストラップから独立したため、このコントロールはブートストラップでは見ることができません。バージョン 3.0 以降。インターネット上の多くの情報は以前のバージョンに基づいており、現在のバージョンとは大きく異なります。