Question

我正在使用typeahead.js自动完成功能。我在下面的链接中看到了为typeahead设置类名的模式。

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names

我尝试了以下选项，但我无法更改typeahead自动完成的默认类名

 $('#the-basics .typeahead').typeahead({
            hint: false,
            highlight: true,
            classNames: {
                input: 'dummy',
                hint: 'dummy',
                menu: 'dummy',
                dataset: 'dummy',
                suggestion: 'dummy',
                empty: 'dummy',
                open: 'dummy',
                cursor: 'dummy',
                highlight: 'dummy',

            }
        },          
        {
            name: 'states',
            displayKey: 'value',
            source: substringMatcher(states),                
            templates: {
                empty: [
                    '<div class="empty-message">No States Found</div>'
                ],
                header: '<h3 class="league-name">States of USA</h3>'
            }
        });

Answer 1

这是一个有效的jsfiddle，您可以看到classNames正常运行。

另请参阅下面的代码段。

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // 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(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  classNames: {
    input: 'dummy',
    hint: 'dummy',
    menu: 'dummy',
    dataset: 'dummy',
    suggestion: 'dummy',
    empty: 'dummy',
    open: 'dummy',
    cursor: 'dummy',
    highlight: 'dummy',
  },
  hint: true,
  highlight: true,
  minLength: 1,
}, {
  name: 'states',
  source: substringMatcher(states)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

如何为bootstrap typeahead.js自动完成

1 个答案: