如何在用户点击按钮后在搜索栏中放置“在搜索范围内”div？(How can I place a “searching within” div in the search bar after a use

如何在用户点击按钮后在搜索栏中放置“在搜索范围内”div？(How can I place a “searching within” div in the search bar after a user clicks a button?)

假设用户点击了“仅在鞋内搜索”按钮。 我希望我的搜索栏能够反映出这个过滤器已经添加了，在开始处添加一个小的灰色框来表示“在鞋内搜索”，如下所示：

我希望搜索输入在此框出现后开始，并且占位符文本也会移入。 什么是实施这个最好的方法？

Say a user clicks a button that says "Search only within footwear." I want my search bar to reflect then this filter has been added by adding a small grey box to the beginning that says "Searching within footwear" like so:

I'd like the search input to begin after this box appears, and have the placeholder text shift over as well. What is the best way to implement this?

最满意答案

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

为了保持它在左边，可以减少输入的宽度，然后在它之前添加过滤器，既可以是伪元素，也可以是填充文本“鞋类”的某个元素。

然后，将鞋类元素的样式与输入进行匹配，以使其看起来像连续输入。

像这样的东西。

或者，如果您可以使用CSS框架，Bootstrap现在支持此行为。 尝试这样的事情：

<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动态更改过滤器文本的值。

Including it at the left side of the input like this introduces some complications, because there's no way to embed an image inside of an input. You might consider adding the text over the input instead if you have the design freedom to do so.

To keep it on the left you can reduce the width of the input, and then add the filter before it, either as a pseudo-element, or some element that you populate with the text "Footwear".

Then, you match up the styling of the Footwear element with the input, so that it looks like a continuous input.

Something like this.

Or, if you can use a CSS framework, Bootstrap supports this behavior now. Try something like 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>

Either way, you can then dynamically change the value of the filter text using Javascript, whenever the user clicks on one of the filter buttons.