Twitter bootstrap 3 带清除x和搜索图标加载项的引导搜索栏

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

我很接近：

但是，正如您所看到的，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>

---

我以不同的方式构建了HTML和JavaScript（正面提示：减少了CSS）

让我知道这是否有效；）

$（文档）.ready（函数（）{
if（$（“#ccSearchInput”）.val（）=''）{
$（“#clearBtn”）.hide（）；
}
$（“#ccSearchInput”）。在（'keyup'，function（）上{
如果（$（this.val（）！=''）{
$（“#clearBtn”）.show（）；
}否则{
$（“#clearBtn”）.hide（）；
}
});
$（“#clearBtn”）。单击（函数（）{
$（“#ccSearchInput”）.val（“”）.focus（）；
$（this.hide（）；
});
});
#basic-addon2：悬停{
光标：指针；
}


您能否将生成的HTML和必要的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;;
}