css перемещение div под текстовыми результатами

Question

Я пытаюсь переместить div ниже автоматического завершения всех результатов поиска. Но после того, как пользователь начинает печатать, я не могу нажать div ниже результатов автозаполнения. Я пытаюсь реализовать поисковый запрос, похожий на www.microsoft.com. Любая помощь будет высоко оценен.

Вот мой 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; 
    } 

Answer 1

изменения ваш 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

с некоторым стилем вы можете создать то, что хотите.

Answer 2

С 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, 
    });