Question

当我在bootply.com上尝试下面的代码时，它只是显示为正常的下拉列表而我没有得到实时搜索框。我错过了什么？

<select class="selectpicker" data-live-search="true" >
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
    <option>Arkansas </option>
    <option>California </option>
    <option>Colorado </option>
    <option>Connecticut </option>
    <option>Delaware </option>
    <option>Florida </option>
    <option>Georgia </option>
    <option>Hawaii </option>
    <option>Idaho </option>
    <option>Illinois Indiana </option>
    <option>Iowa </option>
    <option>Kansas </option>
    <option>Kentucky </option>
    <option>Louisiana </option>
    <option>Maine </option>
    <option>Maryland </option>
    <option>Massachusetts </option>
    <option>Michigan </option>
    <option>Minnesota </option>
    <option>Mississippi </option>
    <option>Missouri </option>
    <option>Montana Nebraska </option>
    <option>Nevada </option>
    <option>New Hampshire </option>
    <option>New Jersey </option>
    <option>New Mexico </option>
    <option>New York </option>
    <option>North Carolina </option>
    <option>North Dakota </option>
    <option>Ohio </option>
    <option>Oklahoma </option>
    <option>Oregon </option>
    <option>Pennsylvania Rhode Island </option>
    <option>South Carolina </option>
    <option>South Dakota </option>
    <option>Tennessee </option>
    <option>Texas </option>
    <option>Utah </option>
    <option>Vermont </option>
    <option>Virginia </option>
    <option>Washington </option>
    <option>West Virginia </option>
    <option>Wisconsin </option>
    <option>Wyoming</option>
</select>

Answer 1

data-live-search不是Bootstrap选项或组件，因此它不仅可以工作。您需要使用第三方组件，例如https://github.com/bassjobsen/Bootstrap-3-Typeahead

Answer 2

您也可以使用bootstrap-select插件：https://silviomoreto.github.io/bootstrap-select/

官方文档中的示例： https://silviomoreto.github.io/bootstrap-select/examples/

您可以在其中了解“数据实时搜索”属性的工作原理。

为什么数据实时搜索不能用于简单的示例

2 个答案: