带有清除 x 和搜索图标的引导搜索栏添加

Question

想要在 Bootstrap 3 中创建一个搜索栏，其中包含仅在有文本时才显示的清晰图标和用户单击以开始搜索的搜索图标。

我很接近：

但是，如您所见，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;;
}

Answer 1

我以不同的方式构建了您的 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>