JS 下拉菜单的 CSS 定位 - 相对于流畅的搜索栏宽度

Question

我正在开发一个带有 js 类别下拉列表的搜索栏。搜索栏需要响应宽度变化，目前总体布局很好。我遇到了一个关于相对于类别按钮定位下拉菜单的问题。就像现在一样，下拉菜单将搜索栏内容向下推。

我已经应用了z-index，但并不开心。
我已将类别下拉列表放入 new-sb-container 中，但仍然没有任何乐趣。非常感谢任何帮助。

<div id="new-sb-container">


<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/> 
<div id="search-category" title='Select a search category'>All Categories</div>


<div id="search-category-menu">

<label id='search-options'>Search Options:</label><br/>

<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>

<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>



</div> <!--end category menu-->

</form>
</div> <!--end search container-->


<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form>    </div>
</div><!--end sb container-->



#new-sb-container{
    clear:both;
    overflow:hidden;
    width: 60%;
    margin-top: 20px;

}


div#search
{
overflow:hidden;
width: 70%; 
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
padding-left: 10px;
float:left;
z-index: 1;
position:relative;

}



#search-form{
position: relative;
float:left;
width: 100%;
z-index: 0;

}


input#query{
    position:relative;
float:left;
    width: 60%;
    height: 27px;
    border: 1px solid #FFFFFF;
    overflow:hidden;

    }



div#search-category /*grey category box*/
{

border-radius: 7px;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
display:inline;
background-color: #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
cursor: default;
margin-right:5px;
float:right;
}



div#search-category-menu
{
float:right;
position:relative;
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:99;

float:right;
}   



div#search-submit{
    position:relative;
float:left;
width:20px;

}

就代码而言，search-category-menu 是相对于 search-form > search > sb-new container 的。

如果这有帮助，还有 jq 形式......

$(document).ready(function()
{   
    function search_autocomplete(selector, tags, default_value)
    {   

        $('#' + selector).focus(function() 
        {
            if($('#' + selector).val() == default_value)
            {
                $('#' + selector).val('');
            }
        });

        $('#' + selector).blur(function() 
                {
                    if($('#' + selector).val() == '')
                    {
                        $('#' + selector).val(default_value);
                    }
                });

      var search =  $('#' + selector).autocomplete(
        {
            source: tags,
            timeout: 0,

            select: function(event, ui) 
            {
                var selected_object = ui.item;              

                var search   = selected_object.value;
                search = search.replace(/\s+/g, '-').toLowerCase();
                var category = $('input[name="search_category"]:checked').val();
                $("#search-form").attr("action", "/search/" + search + "/category/" + category);
               $("#search-form").submit(); 
            }

        }); 

        $('#' + selector).data('ui-autocomplete')._renderItem = function (ul, item) 
        {   
            var re = new RegExp('^' + this.term, "i");
            var t = item.label.replace(re, "<span id='dropdown-item-highlight'>" + "$&" + "</span>");

            return $('<li></li>')
            .data("item.autocomplete", item)
            .append('<a>&nbsp;' + t + '<span id="dropdown-category">  in ' + item.type + '</span></a>')
            .addClass( 'dropdown-item' )
            .appendTo(ul);  
            $('<li></li>').append('<a>Hide suggestion</a>').appendTo(ul);
        };

        $('#' + selector).data('ui-autocomplete')._renderMenu = function (ul, items) 
        {   

               var that = this;
                  $.each( items, function( index, item )
                {
                     that._renderItemData( ul, item );
                  });

                  $(ul)
                  .attr( 'tabindex', -1 )
                  .addClass('dropdown-menu');

                  $('<li></li>')
                  .append('<a>Hide Suggestion</a>')
                  .addClass( 'dropdown-suggestion' )
                  .appendTo(ul);

               };

    }


    $('#search-category-menu').hide();

    $('#search-category-menu input[type="radio"]').click(function() 
    {
       var category = $(this).next("label").text();
       $('#search-category').text(category);
       $('#search-category-menu').hide();
       //not focusing by selector
       $('#query').focus();

    });

    $('#search-category').click(function()
            {
    if ($('#search-category-menu').is(":visible"))
    {
            $('#search-category-menu').hide("fast");

    }
    else
    {

        $('#search-category-menu').show("fast");

    }
    });
    var availableTags = [{"label" : "XBOX 360", "type":"Electronics"},
                         {"label":"XBOX One", "type":"Electronics"},
                         {"label":"Nike", "type":"Clothing & Footwear"}];

    search_autocomplete('query', availableTags, 'Search...');
});

Answer 1

修复了以下内容

从容器中取出类别下拉菜单。放置一个宽度与类别按钮移动百分比相似的 span 元素。使下拉相对于绝对跨度将 z 索引应用于跨度和下拉。下面的代码

<div id="new-sb-container"> 

<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/> 
<div id="search-category" title='Select a search category'>All Categories</div>
</form>
</div> <!--end search container-->

<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form></div>
</div><!--end sb container-->

<span id = "menuplacer">
<div id="search-category-menu">
<label id='search-options'>Search Options:</label><br/>

<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>

<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>

</div> <!--end category menu-->
</span>


#menuplacer{
clear:both;
width:41%;
position: absolute;
}


div#search-category-menu
{
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:1000;
position:relative;
float:right;
}