0

我正在构建具有以下功能的自定义搜索栏：

  • 数据的实时类型过滤（数据当前是硬编码的）
  • 通过下拉列表向上/向下箭头
  • 具有过滤器更改的固定宽度搜索框（ID/创建者/描述/等）
  • 搜索按钮 onclick 事件拉取搜索框数据

它应该如下所示：

在此处输入图像描述

这是它在 IE 中的样子：

在此处输入图像描述

火狐：

在此处输入图像描述

铬合金：

在此处输入图像描述

它在我服务器的沙箱中，所以你可以在那里查看代码。不过，这里是 HTML/CSS。我试图通过向左浮动来“伪造”内联，但我得到了一些奇怪的行为。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Solr Search Prototype</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="scripts.js"></script>
        <link href='style.css' rel='stylesheet' type='text/css' />
    </head>

    <body>
        <div id='container'>
            <div class='inline' id='refine'>Creator<div class="arrow-down"></div></div>
            <input class='inline' id='search' type='text' size='30' />
            <div class='inline' id='submit'>Search</div>
            <div id='refineDropdown'><ul id='refineList'></ul></div>
            <div id='dropdown'><ul id='list'></ul></div>
            <ul id='hidden'></ul>
            <br class="clearBoth" />
        </div>
    </body>
</html>

body {
    margin:50px;
    font-family:Arial, sans-serif;
    font-size:13px;
}
div.inline { float:left; }
.clearBoth { clear:both; }
#refine {
    margin-right:-3px;

    overflow:hidden;
    white-space:nowrap;

    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border:1px solid #AAA;
    height:12px;
    padding:6px 6px 6px 6px;
    text-align:center;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    color:#666;
    text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover { 
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */

    cursor:pointer;
}
#submit {
    margin-right:-1px;

    overflow:hidden;
    white-space:nowrap;

    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    border:1px solid #AAA;
    height:12px;
    padding:6px 6px 6px 6px;
    text-align:center;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    color:#666;
    text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover { 
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    cursor:pointer;
}
.refineClicked {
    background:white !important;
    border-bottom-left-radius:0px !important;
    border-bottom:none !important;
}
.arrow-down {
    margin:0 0 1px 7px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
}
#search {
    margin-right:-5px;
    padding:4px;
    border:1px solid #AAA; 
    color:#444;    
}
#search:focus { outline:none }
#refineDropdown {
    position:relative;
    margin-top:-3px;
    padding:3px;
    width:150px;
    max-height:200px;
    background:#fff;
    border-left:1px solid #AAA;
    border-right:1px solid #AAA;
    border-bottom:1px solid #AAA;
    word-wrap:normal;
    overflow:auto;
}
#hidden { display:none }
#dropdown {
    margin-top:-1px;
    margin-left:50px;
    padding:3px;
    width:213px;
    max-height:200px;
    background:#fff;
    border-left:1px solid #CCC;
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
    word-wrap:normal;
    overflow:auto;
}
ul {
    list-type:none;
    margin:0;
    padding:0;    
}
li {
    padding:5px 10px 5px 10px;
}
li:hover {
    margin:-1px;
    background:#E5F3FF;
    border:1px solid #3366FF;
    cursor:pointer;  
}
.selected {
    margin:-1px;
    background: #E5F3FF;
    border:1px solid #3366FF;
}
4

1 回答 1

1

在您的测试服务器上尝试过并且运行良好。我稍微更改了 html 标记。

html

<div id='container'>
<div class='inline' id='refine'>Long test blah
    <div class="arrow-down"></div>
</div>

<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>

<div class="hidden" id='refineDropdown'>
    <ul id='refineList'></ul>
</div>

<div class="hidden" id='dropdown'>
    <ul id='list'></ul>
</div>
<ul class='hidden'></ul>
<br class="clearBoth" />

​</p>

代码/现场示例

我希望它适合你的需要。

于 2012-11-14T16:08:31.670 回答