Самодельный select с автозаполнением

7 Сен
2011

Здравствуйте, блоговчане!
Сегодня мы сделаем очень привлекательный select для сайта. Пусть на этом сайте будут размешаться объявления по купле-продаже автомобилей. В его основе будет лежать input остальное будет «навешано» блоками div, а сделаем, чтобы все работало на jQuery.
Вот так он будет выглядеть.
image
Вот так он будет выглядеть при нажатии на кнопку справа от input. При нажатии на нее будет выпадать список возможных значений.
image
Вот так он будет выглядеть во время ввода.
image

Начало (html код)

Итак, начнем. А начнем мы с самого простого — html кода.
   Марка

Audi
BMW
Toyota
Porshe
Mercedes-Benz
Volkswagen
Mazda
Skoda
Chevrolet


У нас есть div с id='fon' - это для серого фона, на котором и происходит все действие.
Теги span и input, думаю и так понятны, а вот div с id='but' - это та серо-синяя кнопочка, при нажатии на которую выпадает список. div с id='for_pos', я его намеренно пропустил, служит для того, чтобы поле ввода и кнопочка держались вместе, когда мы их будет "ставить" рядом при помощи float. div с id='below' - это выпадающий список.

Средняя часть (css код)

css код довольно большой, здесь будут отмечены основные моменты. Весь код будет ниже прикреплен, как исходник.
#fon{
width:380px;
height:150px;
}
input {
width:300px;
height:35px;
border-radius:4px;
float:left;
}
#but {
float:right;
background-image:url('kn.png');
}
#for_pos {
width:318px;
}
#below {
width:313px;
background-color:#bfcdde;
position:absolute;
overflow-y:auto;
}
#text {
padding-top:3px;
font-family:verdana;
font-weight:bold;
font-size:20px;
height:27px;
cursor:pointer;
text-align:center;
border-radius:4px;
width:287px;
color:black;
}
#text:hover {
color:gray;
border:1px solid gray;
}

Давайте посмотрим на интересные моменты. input и #but находятся в одном блоке div и разложены в разные стороны. div с id=’below’ будет скрыт, и открываться будет только при нажатии на кнопку.
Самая интересная часть (jQuery код)

Ну, во-первых, скрываем выпадающий список.
$('#below').hide();

Далее прописываем событие, которое происходит при нажатии на кнопку. Переменная sd нужна для определения открыт или закрыт список. Функцией hover воспользоваться нельзя, потому что нам нужно, чтобы при нажатии на элемент списка внутри выпадающего div, сам этот div закрывался.
var sd=0;
if (sd==0) { $('#below').slideDown(500); sd=1; }
else { $('#below').slideUp(500); sd=0; }
});

Здесь мы делаем, чтобы при нажатии на элемент списка, он заносился в input.
$('#text').live('click',function() {
var text = $(this).text();
$('input').val(text);
sd=0; $('#below').slideUp(500);
});

Ну, и напоследок делает автозаполнение
var cars = [
"Audi",
"BMW",
"Toyota",
"Porshe",
"Mercedes-Benz",
"Mazda",
"Volkswagen",
"Skoda",
"Chevrolet"
];
$( "input" ).autocomplete({
source: cars
});

Заключение

На мой взгляд такие select’ы лучше смотрятся, чем стандартные. Также пользоваться ими гораздо удобнее.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх