如何清除引导程序 3 中带有“x"的搜索框? [英] How do I clear a search box with an 'x' in bootstrap 3?

问题描述

在使用 bootstrap 时遇到一些问题，所以一些帮助会很棒.谢谢

我想要什么:(上半部分)

我当前的代码:

<输入类型="文本"类=形式控制"id="findJobTitle"名称=findJobTitle"占位符=职位名称，关键字"onkeyup="showResult()">

当前截图:

解决方案

得到这样的东西

在 Bootstrap 3 和 Jquery 中使用以下 HTML 代码:

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

和一些 CSS:

#searchinput {宽度:200px；}#searchclear {位置:绝对；右:5px；顶部:0；底部:0；高度:14px；保证金:自动；字体大小:14px；光标:指针；颜色:#ccc;}

和 Javascript:

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

当然，您必须为您需要的任何功能编写更多 Javascript，例如如果输入为空，则隐藏x"，发出 Ajax 请求等等.请参阅http://www.bootply.com/121508

Having some trouble with bootstrap, so some help would be awesome. Thanks

What I would like:(top part)

My current code:

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

Current Screenshot:

解决方案

To get something like this

with Bootstrap 3 and Jquery use the following HTML code:

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

and some CSS:

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

and Javascript:

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

Of course you have to write more Javascript for whatever functionality you need, e.g. to hide the 'x' if the input is empty, make Ajax requests and so on. See http://www.bootply.com/121508

这篇关于如何清除引导程序 3 中带有“x"的搜索框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！