Скачал скрипт автозаполнения адаптировал его под свою БД, но т.к. JS почти не знаю, не могу придумать, как запретить всплывающему списку-подсказке раздвигать ту ячейку таблицы в которой он находится.
Вот картинка до и после:
...вот скрипт HTML решил привести его целиком вместе с его CSS, php-движочек дамп таблицы думаю не нужен:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
Модель:
</td>
<td>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td>
3123213
</td>
<td>
wrr</td>
</tr>
</table>
</body>
</html>
Подскажите, исправить то по-моему здесь всего нечего...только вот JS не знаю.
Спустя 16 минут, 44 секунды (24.04.2011 - 14:21) quickxyan написал(а):
не знаю поможет ли, но я вот подумал, что можно было бы попробовать поменять z-index для всплывающего списка в css
Спустя 15 минут, 3 секунды (24.04.2011 - 14:36) GET написал(а):
не получается ставил z-index:1; для всех объектов поочередно в CSS не сработало
Спустя 18 минут, 21 секунда (24.04.2011 - 14:55) quickxyan написал(а):
а если вынести этот кусок за <td> вроде он отвечает за появление окна хотя точно не уверен.
а может попробовать в css добавить td - z-index:1, а для всплывающего окна z-index:2
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
а может попробовать в css добавить td - z-index:1, а для всплывающего окна z-index:2
Спустя 17 минут, 56 секунд (24.04.2011 - 15:13) GET написал(а):
quickxyan
Да это этот кусок раздвигает, если его за таблицу вынести он за ней и на экране появится...пробывал его в отдельный ДИВ засунуть и присвоить ему индекс z=2 а таблице z=1 все равно вылазит так же...
Да это этот кусок раздвигает, если его за таблицу вынести он за ней и на экране появится...пробывал его в отдельный ДИВ засунуть и присвоить ему индекс z=2 а таблице z=1 все равно вылазит так же...
Спустя 11 минут, 10 секунд (24.04.2011 - 15:24) quickxyan написал(а):
ну тогда подождем, может еще кто что-то посоветует.
Спустя 50 минут, 8 секунд (24.04.2011 - 16:14) GET написал(а):
ВОПРОС СНЯТ! ...Нужно было всего лишь поменять
position: relative;
на
position: fixed;
position: relative;
на
position: fixed;
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.