Плагин добавления тегов - Tags Input для uCoz

3539 просмотров Alan_Writer 17.08.2015

Скачать 📥 Демо ▶️

Плагин для удобного и не знаю как еще назвать - наглядного что ли ввода тегов, или любой другой информации в поля input. Думаю уже все видели хоть раз что-то подобное на разных сайтах, на том же мейл.ру при заполнении поля "кому", и на разных других сайтах при заполнении поля тегов. Думаю его и нет смысла использовать для тех полей, куда предполагается ввод какого-то одного значения, а не перечисления нескольких. По сути, плагин просто позволяет каждый добавленный тег отображать как отдельный блок, а поле освобождается для ввода нового. То есть какого-то практического смысла в нем как по мне нет, но смотрится прикольно и как-то технологично.

Это один из лучших вариантов что я нашел. Функций у него не много, я видел такие где целая куча каких-то параметров, но в них пришлось бы разбираться несколько дней, он был бы сложен в установке обычному пользователю, да и я не понимаю - для чего могут быть все эти навороты. Тут есть самое главное: добавление с помощью клавиш enter и запятой, удаление как с помощью кнопки на самом теге так и с помощью клавиши backspace, возможность редактирования уже добавленного тега, собственная функция авто-заполнения (варианты значений добавляются вручную). Весит скрипт тоже немного, и вполне легко устанавливается.

Установка плагина

1. Скачайте архив. Создайте в корне файлового менеджера папку inputtags, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлам скрипта, стилей и вставить код вызова плагина. Все это прописываем перед </body>:
Код
<link rel="stylesheet" href="/inputtags/inputtags.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="/inputtags/inputtags.js"></script>

3. Вставляем куда нужно поле с уникальным идентификатором, или из уже имеющегося берем какой-нибудь (class, id, name, и тд). Если нет у поля уникального идентификатора, то возможно есть у какого-то родительского блока, можно использовать его. Но допустим наше поле выглядит так:
Код
<input id="suggEdit" name="tags" value="" maxlength="150" type="text"/>

Это стандартное поле тегов uCoz, и тут аж два уникальных идентификатора (name и id). Мы допустим возьмем id - suggEdit.

4. И последнее, ниже ссылок из 1-го пункта прописываем скрипт-вызова, в котором и указываем уникальный идентификатор поля, к которому хотим применить функцию.
Код
<script type="text/javascript">
$('#suggEdit').inputosaurus({
width: '600px', // ширина основного поля
autoCompleteSource: ['тег1', 'тег2', 'тег3',], // теги для авто-заполнения
placeholder: "Теги...", // текст в placeholder
activateFinalResult: true,
});
</script>
** Настройки (то что можно менять или удалять) я специально подписал.

Кстати, я естественно сразу подумал, а можно ли его объединить со стандартным авто-заполнением uCoz, использующимся в том же поле тегов, и которое я описывал здесь. Ведь прописывать самому сотни тегов - это бред, а база uCoz - уже скорее всего их имеет и постоянно расширяется. В общем, объединить получилось без проблем, а результат можно увидеть в демо.

Теги: поле, Input, теги, автозаполнение, для uCoz, tags
20 Комментариев
avatar
7
ЗАДОЛБАЛО ПОЛУЧАТЬ УВЕДОМЛЕНИЯ С ЭТОГО САЙТА НА МОЮ ПОЧТУ!!!!
avatar
8
Ну так отпишись от рассылки ебнврт.
avatar
11
так отпишись ... Кто не дает???
avatar
4
Что-то то что указано демо красным в конце поста не указана ссылка biggrin
avatar
5
Ссылки на демо и на скачивание - в начале поста, напротив картинки. Я не понимаю, почему все их не замечают - слепые что ли!
avatar
6
А как поставить то правильно чтобы не прописывать самому теги в скрипте а он находил стандартные ... Собрать сразу можете?
avatar
9
Если ты хочешь именно на странице добавления материала заменить стандартное поле тегов на такое, то выполняй 1 и 2 пункт, 3 пропускай, а в 4 пункте скрипт вызова ставь такой:
Код
<script>
$('#suggEdit').inputosaurus({
autoCompleteSource: [],
placeholder: "Теги...",
activateFinalResult: true,
});
$(function(){
$('#tagsTd2 .ui-autocomplete-input').attr('id','suggEdit');
new _uSuggestList('suggList','suggEdit',{separator:',',colwidth:['100%'],url:'/feat/?a=1'});
});
</script>
avatar
10
Спасибо. Но немного не туда. Я просто хотел привязать в данному системному полю
Код
<input type="text" id="bdF15" class="manFlOth3" size="35" style="width:100%;" name="other3" maxlength="100" placeholder="услуга, сдача, аренда, ремонт и т.д.">
avatar
12
Все абсолютно то-же самое, если хочешь прицепить плагин к уже имеющемуся полю, то в том же скрипте вызова вместо #suggEdit пишешь уникальный идентификатор самого поля к которому этот плагин нужно прицепить, а вместо #tagsTd2 - уникальный идентификатор ближайшего родителя этого поля. Надеюсь понятно.
avatar
13
Так? Правильно?
Код
<script>  
$('#bdF15').inputosaurus({  
autoCompleteSource: [],  
placeholder: "Теги...",  
activateFinalResult: true,  
});  
$(function(){  
$('#bdF15 .ui-autocomplete-input').attr('id','suggEdit');  
new _uSuggestList('suggList','suggEdit',{separator:',',colwidth:['100%'],url:'/feat/?a=1'});  
});  
</script>
avatar
14
Зачем ты и второй раз #bdF15 написал, я же сказал что в это место нужно идентификатор какого-нибудь родительского блока.
avatar
15
Поставил. Спасибо. А как тогда сделать так чтобы с данного поля автоматически добавлялись теги материала? После данного скрипта перестало работать автоматическое заполнение тегов материала. Может что еще и в него нужно прописать?
Код
<script type="text/javascript">var result=[];$('input[name="other3"]').change(function(){for(var a=0;a<$(this).val().split(" ").length;a++){if($(this).val().split(" ")[a].length>3){result[a]=String($(this).val().split(" ")[a])}$('input[name*="tags"]').val("gde31.ru," +result)}while($('input[name*="tags"]').val().search(/,,/)!=-1){$('input[name*="tags"]').val($('input[name*="tags"]').val().replace(/,,/m,",").replace(/^\,/,""))}});</script>
avatar
16
Хз, я не знаю что это за скрипт, смотреть надо.
avatar
17
Ну этот скрипт автоматически добавлял с поля теги в поле тегов.
avatar
18
"с поля теги в поле тегов" - в смысле?
avatar
19
Я сделал дополнительное поле №3 при добавлении объявлений, ключевыми словами, чтобы когда пользователь вводит там ключи,они еще прописываются в мета тегах, а этот скрипт автоматически добавлял еще мета теги. Но когда прописал скрипт на поле "other3", то не прописывается. А так как это работало раньше на картинке http://savepic.net/8016267.png
avatar
20
Короче так теперь не сделаешь, скрипт нужно переделывать, а я сам в JS почти не шарю (пока что).
avatar
2
Скачайте архив. - для начала было бы неплохо его тут показать, где скачать wink
avatar
3
В самом начале страницы, напротив картинки - справа блок с информацией, там и ссылка на скачивание. Не так уж сложно найти.
avatar
1
Батя новатор!