Question

我正在尝试将div移动到自动完成搜索结果下方。但是在用户开始输入后，我无法将div推到自动完成结果下方。我正在尝试实现类似于www.microsoft.com的搜索框。任何帮助都将受到高度赞赏。

<input name="query" id="pageSearchField" type="text" maxlength="50" value="" class="ui-autocomplete-input" autocomplete="off">

    var availableTags = [
        "Details",
        "Project ",
        "Release ",
        "Property ",
        "Application",
        "Last Modified By",
        "Last Modified Date",
        "Tagged by"            
    ];
    $("#pageSearchField").autocomplete({
        source: availableTags
    });



$("#pageSearchField").click(function () {
        $('#bottom-div').show("slow");
    });
    $('#pageMainRegion').click(function () {
        $('#bottom-div').hide("slow");
    });
    $('#bottom-div>div').css("background-color", "white");

    var firstFilterText = "Search Data Centers";
    var secondFilterText = "Search Projects";
    var thirdFilterText = "Search Orders";
    $("#pageSearchField").after("" +
        "<div  id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
        "<div>" + secondFilterText + "</div>" +
        "<div>" + thirdFilterText + "</div></div>");

    $('#bottom-div>div').click(function () {
        $('#bottom-div>div').css("background-color", "white");
        $('#bottom-div>div').css("color", "black");
        $(this).css("background-color", "gray");
        $(this).css("color", "white");
    });


#bottom-div {
    z-index: 999;
    position: absolute;
    min-width: 290px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    height: 80px;
    cursor: pointer;
    display: none;
    border-top-color: #000;
}

    #bottom-div > div {
        padding-bottom: 5px;
    }

Answer 1

由于Ui-Autocomplete的位置是绝对的，它不会以正常方式影响页面布局，也不会推动它下面的元素。

一种方法是extend the ui autocomplete使用div at the bottom of the autocomplete (jsFiddle)

进行渲染

 $.widget( "custom.autocompletePlus", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var original = this._super(ul, items);

        $(ul).append(
            "<p>Your Html goes here</p>"
        );
   }
 });


 $("#pageSearchField").autocompletePlus({
        source: availableTags,
    });

Answer 2

像这样改变你的jQuery：

$(".ui-autocomplete").after("" +
        "<div  id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
        "<div>" + secondFilterText + "</div>" +
        "<div>" + thirdFilterText + "</div></div>");

从您的position:absolute中移除bottom-div，然后将此类添加到您的CSS中：

.ui-autocomplete{
    position:relative;
    top:0;
    left:0;
}

DEMO

使用某种风格，你可以创造你想要的东西。

css在文本结果下面移动div

2 个答案: