javascript - 用户单击按钮后，如何在搜索栏中放置一个 "searching within"div？

Question

假设用户点击了一个显示“仅在鞋类中搜索”的按钮。我希望我的搜索栏能够反射(reflect)这个过滤器，方法是在开头添加一个小灰色框，上面写着“在鞋类中搜索”，如下所示:

我希望搜索输入在此框出现后开始，并且占位符文本也移动过来。实现这一点的最佳方法是什么？

Answer 1

像这样将它包含在输入的左侧会带来一些复杂性，因为无法将图像嵌入到输入中。如果您有设计自由度，则可以考虑在输入上添加文本。

要将它保留在左侧，您可以减小输入的宽度，然后在它之前添加过滤器，作为伪元素，或者您用文本“Footwear”填充的某个元素。

然后，您将 Footwear 元素的样式与输入相匹配，使其看起来像一个连续输入。

类似于 this .

或者，如果您可以使用 CSS 框架，Bootstrap 现在支持这种行为。尝试像 this 这样的东西:

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user">Footwear</span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

无论哪种方式，只要用户点击其中一个过滤器按钮，您就可以使用 Javascript 动态更改过滤器文本的值。