Bootstrap高级下拉搜索

Question

我想创建一个与此相当的搜索栏：

https://bootsnipp.com/snippets/featured/advanced-dropdown-search

但是这个例子中的问题是如果用户只在第一个输入文本框中写入，则不会调用任何操作。我该如何解决？我尝试添加一个输入的表单，但是下拉按钮不合适。

Answer 1

我假设你在这里提到的行动是“表格提交”。

如果您查看HTML，此处唯一的“提交”按钮是下拉列表中带有搜索图标的按钮。

                             ...
                              <div class="form-group">
                                <label for="contain">Contains the words</label>
                                <input class="form-control" type="text" />
                              </div>
                              <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </form>
                            ...

搜索文本输入“搜索片段”旁边可见的按钮只是一个常规按钮，不会执行任何操作。

<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

这实际上只是一个UI示例，期望您将编写要关联的javascript和性能函数。

如果您只想要简单的提交操作，我会删除下拉列表中的提交按钮，并将可见按钮更改为提交按钮。您还必须移动结束标记以将操作包装到表单中。