| |
|
|
| | Добрый день.
Сделал на сайте input который выводит слова для выбора, совпадающие с введенным текстом. (исходник брал http://jquery.page2page.ru/index.php5/Автозаполнение ).
вот код:
<body>
<label for="tags">Места: </label><br />
<input id="tags" />
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items){
var self = this,
currentCategory = "";
$.each( items, function(index, item){
if(item.category != currentCategory){
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
var availableTags = [
{label:"Чебоксары", category:"города"},
{label:"Челябинск", category:"города"},
{label:"Челны", category:"поселки"},
{label:"Ставрополь", category:"города"},
{label:"Чехия", category:"страны"}
];
$( "#tags" ).catcomplete({
delay: 0,
source:availableTags
});
</script>
</body>
|
Работает все отлично, пробовал подключить одновременно до 6-ти инпутов на страницу, работает стабильно.
Проблема в том, что когда при помощи javascript (по нажатию на кнопку "Добавить") добавляю новый input, то на нем это автозаполнение не работает, хотя если вручную его вписывать, работает отлично.
Код добавления нового input:
function add_tag()
{
//считываем номер для тега
var num;
num=document.getElementById('num').textContent;
num++;
document.getElementById('num').textContent = num;
//подсчитываем количество итераций при добавлении тегов в базу
var rows=document.getElementById('rows').value;
rows++;
document.getElementById('rows').value = rows;
// Создаем новый tr-элемент
var new_input=document.createElement('tr');
//вносим инпут и выпадающий список
new_input.innerHTML="<td id='str1"+num+"' width='100px'><input type='text' name='ingr_gram"+num+"' class='ves'></td><td id='str2"+num+"'> грамм </td><td id='str3"+num+"' width='400px'><input type='text' name='ingr2' id='ingr'></td><td id='str4"+num+"'><img src='img/deletered.png' width='35px' onclick='delete_tag("+num+")'></td>";
// Добавляем только что созданный div на страницу
document.getElementById('table_tags').appendChild(new_input);
}
|
Подскажите новичку, может оно не срабатывает потому что при первом запуске страницы второй, третий и т.д. input еще не существует? | |
| |
|
|
| |
|
|
| |
для: Kaje
(17.06.2012 в 14:30)
| | | когда новый элемент создаете, делайте для него уникальный id
и вызывайте плагин для него
....
// Добавляем только что созданный div на страницу
document.getElementById('table_tags').appendChild(new_input);
$( "#ID" ).catcomplete({})
}
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.06.2012 в 15:29)
| | | Спасибо. Заработало :D | |
| |
|
|
| |
|
|
| |
для: Kaje
(17.06.2012 в 15:47)
| | | Из этого всего вылезло следующее. Теперь при отправке данные из автоматически добавленных input не передаются. Поля name в порядке. Погуглил, наткнулся на http://www.cyberforum.ru/javascript-jquery/thread604624.html
Подскажите, куда в этом коде втулить:
autoNumAttr:true,
autoIdAttr:true | |
| |
|
|
| |
|
|
| |
для: Kaje
(17.06.2012 в 22:05)
| | | нашел ответ:
неправильно:
HTML
<table>
<form>
...
</form>
</table>
правильно:
HTML
<form>
<table>
...
</table>
</form> | |
| |
|
|
