2016-04-25 36 views
2

テキストがある場合にのみ表示される透明グリピコンとユーザーが検索を開始するためにクリックするグリッドグリッドの両方でブートストラップ3で検索バーを作成したい。クリアxと検索アイコンの両方が付いたブートストラップ検索バーの追加

私は近くにいます:

enter image description here

しかし、あなたはXのグリフを見ることができるように、検索バーと同じスペースを占有します。 xをより遠くに配置しようとすると、検索バーの後ろで消えます。

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:this.resources> 
     <xp:styleSheet href="/cc_CommonSearchBar.css" /> 
    </xp:this.resources> 
    <div class="input-group" style="width:300px"> 
     <!--  <div class="btn-group">--> 
     <input id="ccSearchInput" type="text" class="form-control" 
      placeholder="Search for..." /> 
     <span id="ccSearchClear" class="glyphicon glyphicon-remove-circle" /> 
     <span class="input-group-addon" id="basic-addon2"> 
      <i class="glyphicon glyphicon-search" /> 
     </span> 
    </div> 
    <xp:scriptBlock id="scriptBlock1"> 
     <xp:this.value><![CDATA[$(document).ready(function(){ 
    $("#ccSearchInput").keyup(function(){ 
     $("#ccSearchClear").toggle(Boolean(this.value)); 
    }); 
      $("#ccSearchClear").toggle(Boolean($("#ccSearchInput").val())); 
      $("#ccSearchClear").click(function(){ 
     $("#ccSearchInput").val("").focus(); 
     $("#ccSearchClear").hide(); 
     }); 
});]]></xp:this.value> 
    </xp:scriptBlock> 
</xp:view> 

そして、私のCSS::私のコードは以下の通りです

#ccSearchInput { 
    width: 200px; 
} 

#ccSearchClear {  
    position:absolute !important; 
    right:5px !important; 
    top:0 !important; 
    bottom:0 !important; 
    height:14px !important; 
    margin:auto !important; 
    font-size:14px !important; 
    cursor:pointer !important; 
    color:#ccc !important;; 
} 
+0

トラブルシューティングを容易にするために、生成されたHTMLと必要なCSSを組み込むことができますか? (http://jsfiddle.net) - 必要なものだけを追加することを覚えておいてください([mcve]の作成を読む) – ochi

+0

これは私の最初のフィドルなので、正しいのかどうか私に教えてください。 https://jsfiddle.net/bryanschmiedeler/jso8663q/ –

+0

私は可能な答えを追加しました – ochi

答えて

5

私は違ったあなたのHTMLとJavaScriptを構造化(肯定的なノート:あなたのCSSを減らす)

なら、私を知ってみましょうこの作品;)

$(document).ready(function() { 
 

 
    if ($("#ccSearchInput").val() === '') { 
 
    $("#clearBtn").hide(); 
 
    } 
 

 
    $("#ccSearchInput").on('keyup', function() { 
 
    if ($(this).val() !== '') { 
 
     $("#clearBtn").show(); 
 
    } else { 
 
     $("#clearBtn").hide(); 
 
    } 
 
    }); 
 

 
    $("#clearBtn").click(function() { 
 
    $("#ccSearchInput").val('').focus(); 
 
    $(this).hide(); 
 
    }); 
 
});
#basic-addon2:hover { 
 
    cursor: pointer; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<hr/> 
 
<div class="row" style="float:right"> 
 
    <div class="col-xs-4"> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control" id="ccSearchInput" placeholder="Search for..."> 
 
     <div class="input-group-addon" id="clearBtn"><i class="glyphicon glyphicon-remove-circle"></i> 
 
     </div> 
 
     <div class="input-group-addon" id="searchBtn"><i class="glyphicon glyphicon-search"></i> 
 
     </div> 
 
    </div> 
 
    <!-- <span class="" id="ccSearchClear"></span> --> 
 
    </div> 
 
</div>

+0

あなたはそれがうまくいくと賭けました!ありがとう、トン。それは非常に素晴らしいコードです。 –

+0

うれしい;) – ochi