[解決済み] bootstrap 3 で検索ボックスの 'x' を消すにはどうしたらいいですか？

質問

bootstrapに問題があるので、何か手助けがあると助かります。ありがとうございます。

私が欲しいもの：（トップ部分）

私の現在のコードです。

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

現在のスクリーンショットです。

どのように解決するのですか？

このようなものを得るには

をBootstrap 3とJqueryで表示するには、次のようなHTMLコードを使用します。

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

といくつかのCSSがあります。

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

とJavascriptで記述します。

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

もちろん、入力が空の場合は 'x' を隠したり、Ajax リクエストを行うなど、必要な機能のためにさらに Javascript を記述する必要があります。参照 http://www.bootply.com/121508