ユーザーがボタンをクリックした後に検索バーに「検索内」divを配置するにはどうすればよいですか？

Question

「シューズ内のみで検索」というボタンをユーザーがクリックしたとします。私が開始するには、検索入力を希望

：私は私の検索バーを反映​​したい、このフィルタはそうのように「靴内検索」と言い始めに小さな灰色のボックスを追加することによって追加されましたこのボックスが表示された後に、プレースホルダテキストも同様にシフトされます。これを実装する最良の方法は何ですか？

Answer 1

このように入力の左側にこれを含めると、入力内に画像を埋め込む方法がないため、いくつかの問題が発生します。設計上の自由度がある場合は、代わりに入力にテキストを追加することを検討することもできます。

左に保持するには、入力の幅を減らしてから、その前に擬似要素として、または「Footwear」というテキストを入力する要素として、フィルタを追加します。

次に、Footwear要素のスタイリングを入力と一致させて、連続入力のように見せます。

と同様のものthis。

CSSフレームワークを使用できる場合は、ブートストラップでこの動作がサポートされます。 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> 

いずれかの方法で、あなたは、動的に、ユーザは、フィルタボタンの1つをクリックするたびに、Javascriptを使用してフィルタテキストの値を変更することができます。

Answer 2

これを実装する無限の方法があります。最高のものは、主にプロジェクトのニーズと範囲に依存します。あなたのページに多くの動的な振る舞いを追加する場合は、Vue、React、Angular 2などのモダンなビューフレームワークを見てみることをお勧めします。

@Brickyの言うところによれば、 "Footwear"という単語が必要な場所にdivを入れ、後でclickイベントで埋め込むことができます。

この例を参照してください：

'use strict'; 
 

 
$('.filter').click(function (_) { 
 
    $('.current-filter').text('Footwear'); 
 
});

.toolbar { 
 
    padding: 15px; 
 
    background: #ff6347; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
} 
 
.search-wrapper { 
 
    display: -webkit-inline-box; 
 
    display: -ms-inline-flexbox; 
 
    display: inline-flex; 
 
    width: 300px; 
 
    background-color: #808080; 
 
    color: #fff; 
 
} 
 
.search-wrapper .current-filter:not(:empty) { 
 
    padding: 3px; 
 
} 
 
.search-wrapper input { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toolbar"> 
 
    <div class="search-wrapper"> 
 
    <div class="current-filter"></div> 
 
    <input placeholder="Search..." /> 
 
    </div> 
 
</div> 
 
<div> 
 
    <button class="filter">Footwear</button> 
 
</div>

私はいつも同じサイズのボックスを維持するために、いくつかのフレキシボックスのプロパティを使用しました。