13 521
правка
Изменения
Нет описания правки
<p>Мультивыбор с пояснением: <input type="text" id="x" name="x" value="" /></p>
<p>Мультивыбор с побочным эффектом: <input type="text" id="y" name="y" value="" /></p>
<p>Постоянно видимый мультивыбор:</p>
<div class="wrapPersist">
<input class="inputPersist" type="text" id="ms" value="" size="40" />
</div>
<div style="clear: both"></div>
<link rel="stylesheet" type="text/css" href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.css?view=co" />
<style>
.wrapPersist {
border-radius: 5px;
border: 1px solid rgb(82, 168, 236);
float: left;
-webkit-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 5px rgba(82, 168, 236, 0.6);
}
.wrapPersist .inputPersist {
margin: 5px;
border-width: 0 0 1px 0;
border-bottom-style: solid;
border-bottom-color: rgb(82, 168, 236);
}
.wrapPersist .hintActiveItem {
background: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 83%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(83%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 83%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.email { color: gray; }
.wrapPersist .hintActiveItem .email { color: #e0e0e0; }
.hintPersist {
height: 200px;
font-size: 75%;
overflow-y: scroll;
}
</style>
<script language="JavaScript" src="http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/hinter.js?view=co"></script>
<script language="JavaScript">
new SimpleAutocomplete('x', cb, { multipleDelimiter: ',', prompt: 'Выберите дядек' });
ya = new SimpleAutocomplete('y', cb2, { multipleListener: clcb });
var users = [
[ 'vasya@oymorozmoroz.ru', 'Вася Пупкин' ],
[ 'misha@oymorozmoroz.ru', 'Миша Метёлкин' ],
[ 'alisa@oymorozmoroz.ru', 'Алиса Амосова' ],
[ 'zoya@oymorozmoroz.ru', 'Зоя Зотова' ],
[ 'pavel@oymorozmoroz.ru', 'Паша Косолапов' ]
];
var sel3 = { 'vasya@oymorozmoroz.ru': 1 };
function cb3(h, v)
{
var items = [];
for (var i = 0; i < users.length; i++)
{
if (v.length && (users[i][0].toLowerCase().indexOf(v.toLowerCase()) >= 0 ||
users[i][1].toLowerCase().indexOf(v.toLowerCase()) >= 0) && !sel3[users[i][0]])
{
items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
}
}
for (var i = 0; i < users.length; i++)
{
if (sel[users[i][0]])
{
items.push([ users[i][1]+'<div class="email">'+users[i][0]+'</div>', users[i][0], false, sel3[users[i][0]] ]);
}
}
h.replaceItems(items);
}
function clcb3(h, i, item)
{
sel3[item[1]] = item[3];
}
new SimpleAutocomplete('z', cb3, {
multipleListener: clcb3,
persist: true,
className: 'hintPersist',
prompt: '<center style="color: gray">начните вводить имя пользователя</center>',
emptyText: '<center style="color: gray">пользователи не выбраны<br /><i>начните вводить имя пользователя</i></center>'
});
</script>
</html>