CODEWITHSUNDEEP
csshtmlalignment
Kurkula
Kurkula

Reputation: 6762

css moving div below text results

I am trying to move a div below auto complete search results. But i am unable to push the div below autocomplete results after user starts typing. I am trying to implement searchbox similar to www.microsoft.com. Any help would be highly appreciated.

Here is my Fiddle code

<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;
    }

Upvotes: 2

Views: 440

Answers (2)

Mohsen Safari
Mohsen Safari

Reputation: 6795

change your jQuery like this:

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

remove position:absolute from your bottom-div and add this class to your CSS:

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

DEMO

with some style you can create what you want.

Upvotes: 1

roo2
roo2

Reputation: 6071

Since Ui-Autocomplete has position:absolute, it will not affect page layout in the normal way and it will not push elements below it.

One approach is to extend the ui autocomplete to render with your 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,
    });

Upvotes: 2

Related Questions