простой текстовый блок ввода "autosuggest" скрипт - как перекрывать css - PullRequest
Новая
       3

простой текстовый блок ввода "autosuggest" скрипт - как перекрывать css

0 голосов
/ 10 сентября 2011

Я пытаюсь написать простой текстовый блок ввода "autosuggest / autocomplete" скрипт - как на главной странице Google (по крайней мере, пока они не усложнили несколько недель назад)

Все работает, кромекогда появляются предложения, они нажимают на текст, унося поле вводаЯ хотел бы перекрыть текст под окном автоматического предложения. 

/* listener on keyup event in parts box*/   
        $('.SRPR').live('keyup', function() {   
                var stringLength = $(this).val().length;
                var stringValue = $(this).val();
                if( ($(this).val().length) > 2){                                                                                
                    var location = $(this);
                    fnShowSuggestions(location, stringValue, stringLength);
                }
                else{
                    var location = $(this);
                    var divToPutData = location.nextAll("div"); 
                    divToPutData.hide('slow');
                }                               
        });



<input name="SRPR" class="SRPR  type="text"> 
   <div class="cl_preInventoryList">
    auto-suggest text goes here.
   </div> 
</div>
<b>other stuff here</b>


/* styling to auto-suggest*/
.cl_preInventoryList{   
    padding-left: 90px; 
    margin-top: 2px;
    z-index: 99;        
}

.cl_preInventoryList a {    
    color: white;
    text-decoration: none;  
}
.cl_preInventoryList ul {   
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;    
}
.cl_preInventoryList li {
    margin: 0px;    
    padding: 2px 5px;
    cursor: default;
    display: block;
    color: white;   
    line-height: 16px;
    overflow: hidden;
    border-width: 1px;
    border: 1px solid #405B76;  
}

1 Ответ

1 голос
/ 10 сентября 2011

Чтобы решить эту проблему, вы должны сделать свой div плавающим на странице, используя зелье: стиль абсолютного CSS, но это легко сделать с правильным аддоном к JQ

аддон здесь

Вы должны добавить в прямом эфире следующее 

$('.cl_preInventoryList').absolutize()

Это не должно ничего толкать вниз на странице

...