Javascript 将div附加到搜索文本框以创建类似Gmail的搜索框
我正在创建一个类似Gmail的搜索框,在这里我点击文本框,它会打开一个新的div,在这里我可以输入各种字段的搜索条件。 如何将文本框('#searchTextBox)或包含文本框的div与搜索表单的div('#gmailSearchBox)紧密连接? 此外,我使用引导响应,因此文本框的位置和大小会发生变化。所以只设置div样式的display:block和display:none是不起作用的。 谢谢 Html代码:Javascript 将div附加到搜索文本框以创建类似Gmail的搜索框,javascript,jquery,twitter-bootstrap,search-box,Javascript,Jquery,Twitter Bootstrap,Search Box,我正在创建一个类似Gmail的搜索框,在这里我点击文本框,它会打开一个新的div,在这里我可以输入各种字段的搜索条件。 如何将文本框('#searchTextBox)或包含文本框的div与搜索表单的div('#gmailSearchBox)紧密连接? 此外,我使用引导响应,因此文本框的位置和大小会发生变化。所以只设置div样式的display:block和display:none是不起作用的。 谢谢 Html代码: <div style="border:1px solid grey; bo
<div style="border:1px solid grey; border-radius:3px; max-width:300px; padding-right:0px; padding-left:0px;"class="container-fluid">
<div style="left:0px;right:20px; line-height:inherit; float:left; width:100%; ">
<input id="searchTextBox" type="text" style="border:none; width:95%; line-height:inherit; padding:0px 0px 0px 0px;">
<a id="showSearchBox" href="#" style="height:20px">
<span class="caret" style="vertical-align:middle; height:100%"> </span>
</a>
</input>
</div>
</div>
<input type="button" value="Search" Class="btn btn-primary" /><br>
Various<br>
Other<br>
Information<br>
Goes <br>
Here<br>
<div id='gmailSearchBox' class="gmailSearchBox" style="position:absolute; display:none; border:1px solid grey">
<form action="" method="post">
From:<input type="text" id="fromDate">
<br/>
To: <input type="text" id="toDate">
<br/>
Type:<select id="logType">
<option>--Select Type--</option>
</select>
<br/>
Text:<input type="text" id="searchText">
<br/>
<input type="submit" class="btn btn-primary">
</form>
</div>
jsiddle link-如果将#gmailSearchBox放在包含输入的同一个div中,它将按照您的意愿工作。您可能还需要为#gmailSearchBox设置背景色。如果您将#gmailSearchBox放在包含输入的同一个div中,它将按照您的意愿工作。您可能还需要为#gmailSearchBox设置背景色。如果您想使用css实现这一点,您可能需要稍微更改标记。请参阅以下小提琴,它可以满足您的需要: 修订后的标记:
<div id="search" style=""class="container-fluid">
<div id="searchInputWrapper" style="">
<input type="text" style=""> <a id="showSearchBox" href="#" style="height:20px">
<span class="caret" style="vertical-align:middle; height:100%"> </span>
</a>
</input>
</div>
<div id='gmailSearchBox' class="gmailSearchBox" style="">
<form action="" method="post">From:
<input type="text" id="fromDate">
<br/>To:
<input type="text" id="toDate">
<br/>Type:
<select id="logType">
<option>--Select Type--</option>
</select>
<br/>Text:
<input type="text" id="searchText">
<br/>
<input type="submit" class="btn btn-primary">
</form>
</div>
更新:
如果搜索框的高度不是静态的,可以使用javascript设置底部偏移。这是最新的提琴:
下面是修改后的处理程序:
$('#showSearchBox').click(showSearchBox);
function showSearchBox() {
var height = 0,
$searchBox = $('#gmailSearchBox');
$searchBox.css({display:'block'});
//get the height of the search box
height = $searchBox.height();
//set the offset equal to the height
$searchBox.css({bottom:-height +'px'});
}
如果您想使用css实现这一点,您可能需要稍微更改标记。请参阅以下小提琴,它可以满足您的需要: 修订后的标记:
<div id="search" style=""class="container-fluid">
<div id="searchInputWrapper" style="">
<input type="text" style=""> <a id="showSearchBox" href="#" style="height:20px">
<span class="caret" style="vertical-align:middle; height:100%"> </span>
</a>
</input>
</div>
<div id='gmailSearchBox' class="gmailSearchBox" style="">
<form action="" method="post">From:
<input type="text" id="fromDate">
<br/>To:
<input type="text" id="toDate">
<br/>Type:
<select id="logType">
<option>--Select Type--</option>
</select>
<br/>Text:
<input type="text" id="searchText">
<br/>
<input type="submit" class="btn btn-primary">
</form>
</div>
更新:
如果搜索框的高度不是静态的,可以使用javascript设置底部偏移。这是最新的提琴:
下面是修改后的处理程序:
$('#showSearchBox').click(showSearchBox);
function showSearchBox() {
var height = 0,
$searchBox = $('#gmailSearchBox');
$searchBox.css({display:'block'});
//get the height of the search box
height = $searchBox.height();
//set the offset equal to the height
$searchBox.css({bottom:-height +'px'});
}
我不确定我是否明白这个问题!你说的“我怎样才能把文本框贴紧”是什么意思?如果这是一个造型问题,请向我们展示您希望它的外观@尼姆罗德:我想要一个类似于Gmail搜索框的东西。包含搜索表单的div应保留在搜索文本框的底部。如果查看JSFIDLE链接,单击文本框中的向下箭头,搜索表单将显示在最底部。但是,我如何设置搜索表单,以便无论我在哪里有搜索文本框,搜索表单都会附着在它上。希望这能澄清问题。gmail搜索框的快照我不确定我是否明白这个问题!你说的“我怎样才能把文本框贴紧”是什么意思?如果这是一个造型问题,请向我们展示您希望它的外观@尼姆罗德:我想要一个类似于Gmail搜索框的东西。包含搜索表单的div应保留在搜索文本框的底部。如果查看JSFIDLE链接,单击文本框中的向下箭头,搜索表单将显示在最底部。但是,我如何设置搜索表单,以便无论我在哪里有搜索文本框,搜索表单都会附着在它上。希望这能澄清问题。gmail搜索框的快照感谢您的回复,但“底部:-212px”使其难以编码。它在小提琴的例子中起作用,但不是无处不在。有没有办法让它充满活力?无论“searchInputWrapper”放在何处,“Gmail SearchBox”都应该绑在它的下面。@darsheets只要下拉列表的高度不变,它就可以在任何地方工作。底部的偏移量应与下拉框的高度相同。只需将212px更改为您使用的任何高度。..@darsheets如果搜索框的高度可以更改,请查看我修订的javascript代码。感谢您的回复,但“底部:-212px”使此代码变硬。它在小提琴的例子中起作用,但不是无处不在。有没有办法让它充满活力?无论“searchInputWrapper”放在何处,“Gmail SearchBox”都应该绑在它的下面。@darsheets只要下拉列表的高度不变,它就可以在任何地方工作。底部的偏移量应与下拉框的高度相同。只要将212px更改为您使用的任何高度…@darsheets如果搜索框的高度可以更改,请查看我修订的javascript代码。