Jquery自动完成输入文本动态创建
Jquery autocomplete input text created dynamically
我试图做一个代码,以便用户可以通过创建输入文本职业[]的"+"按钮添加无限数量的职业。但是,当创建新的输入文本时,它不能像其他本机输入一样自动完成(不是动态创建的)。
那么如何正确地添加新的输入文本以允许所有输入的自动完成呢?
这是我的Jquery代码自动完成: $('input[name="occupation[]"]').on("keyup", function(){
var occup = $(this).val();
var currentElement = $(this);
if(occup != ""){
$.ajax({
type: "GET",
url: "page_geneoccup.php",
data: {"occup":occup},
dataType: 'json',
success:function(responseData){
var liste_occup=responseData;
$(currentElement).autocomplete({
source: liste_occup
});
return;
},
error:function(XMLHttpRequest, textStatus, errorThrow){
console.log("Error: " + XMLHttpRequest.status + errorThrow );
return;
}
});
}
});
PS:对不起,我的英语…
问好我的新代码but,用于第一个输入而不是用于其他输入:
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var oAutoCompleteElements = {
addInputEvents:function(newInputs){
var r_newInputs = $(newInputs);
$(newInputs).each(function(i, oInput){
$(oInput).off();
$(oInput).on('keyup',function(){
var occup = $(oInput).val();
if(occup){
$.ajax({
type: "GET",
url: "page_geneoccup.php",
data: {"occup":occup},
dataType: 'json',
success:function(responseData){
var liste_occup=responseData;
$(oInput).autocomplete({
source: liste_occup
});
return;
},
error:function(XMLHttpRequest, textStatus, errorThrow){
console.log("Error: " + XMLHttpRequest.status + errorThrow );
return;
}
});
}
});
});
},
addButtonEvents:function(){
$('#addNewInput').on('click',function(){
oAutoCompleteElements.addNewInput();
});
},
addNewInput:function(){
newInput ='<input type="text" name="occupation[]"/>';
$('#occupationsContainer').append(newInput);
oAutoCompleteElements.addInputEvents($('input[name="occupation[]"]:last'));
},
init:function(){
this.addButtonEvents();
this.addInputEvents($('input[name="occupation[]"]'));
}
};
$(function(){
oAutoCompleteElements.init();
});
var counter = 1;
function addInput()
{
var target = document.getElementById('occupationsContainer');
var newdiv = document.createElement('div');
var newdivname = 'Div' + counter;
newdiv.setAttribute('id',newdivname);
content = newdiv.innerHTML;
content +='<input name="occupation[]">';
content +='<a id="AccountDelete" href="#" onclick="removeInput(''' + newdivname + ''');">[Supprimer cet enfant]</a><br><br><hr><br><br>';
newdiv.innerHTML = content;
target.appendChild(newdiv);
counter++;
}
function removeInput(idInput)
{
var elmt = document.getElementById(idInput);
elmt.parentNode.removeChild(elmt);
}
</script>
</head>
<body>
<div id="occupationsContainer">
<input name="occupation[]">
<input type="button" id="addNewButton" value="add" onclick="addInput();">
</div>
</body>
</html>
有什么办法能解决这个问题吗?
对
解决方案:
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var oAutoCompleteElements = {
addInputEvents:function(newInputs){
var r_newInputs = $(newInputs);
$(newInputs).each(function(i, oInput){
$(oInput).off();
$(oInput).on('keyup',function(){
var occup = $(oInput).val();
if(occup){
$.ajax({
type: "GET",
url: "page_geneoccup.php",
data: {"occup":occup},
dataType: 'json',
success:function(responseData){
var liste_occup=responseData;
$(oInput).autocomplete({
source: liste_occup
});
return;
},
error:function(XMLHttpRequest, textStatus, errorThrow){
console.log("Error: " + XMLHttpRequest.status + errorThrow );
return;
}
});
}
});
});
},
addButtonEvents:function(){
$('#addNewInput').on('click',function(){
oAutoCompleteElements.addNewInput();
});
},
addNewInput:function(){
newInput ='<input type="text" name="occupation[]"/>';
$('#occupationsContainer').append(newInput);
oAutoCompleteElements.addInputEvents($('input[name="occupation[]"]:last'));
},
init:function(){
this.addButtonEvents();
this.addInputEvents($('input[name="occupation[]"]'));
}
};
$(function(){
oAutoCompleteElements.init();
});
</script>
</head>
<body>
<div id="occupationsContainer">
<input name="occupation[]">
<input type="button" id="addNewInput" value="add">
</div>
</body>
</html>
非常感谢你的帮助
在调用DOM就绪时,新元素不是DOM的一部分,并且不会成为您在$('input[name="occupation[]"]')中创建的数组的一部分;
你应该将元素添加到数组中,或者通过重新启动用于向元素添加自动补全的函数。
我删除了这部分,因为它太长了。
在你的正文中,你只需要一个包含输入的元素id = " occupationsContainer "还有一个按钮id = " addNewButton "
,这应该做你想要的;)
最终解决方案:
也从occuationscontainer元素中删除按钮,并将其添加到括号之外,这将确保该元素始终在输入的下方。
var oAutoCompleteElements = {
counter:1,
addInputEvents:function(newInputs){
var r_newInputs = $(newInputs);
$(newInputs).each(function(i, oInput){
$(oInput).off();
$(oInput).on('keyup',function(){
var occup = $(oInput).val();
if(occup){
console.log('a call to your autocompleter list');
}
});
//add events to the new deleteButton
var deleteInput = $(oInput).parent().find('.deleteInput');
$(deleteInput).each(function(i, oDelete){
$(oDelete).on('click',function(){
oAutoCompleteElements.removeInput($(oInput).parent());
});
});
});
},
//add events to the add button,
addButtonEvents:function(){
$('#addNewInput').on('click',function(){
oAutoCompleteElements.addNewInput();
});
},
//add a new input
addNewInput:function(){
newInput ='<div id="Div' + oAutoCompleteElements.counter + '"><input type="text" name="occupation[]"/><a class="deleteInput">[Supprimer cet enfant]</a></div>';
oAutoCompleteElements.counter ++ ;
$('#occupationsContainer').append(newInput);
oAutoCompleteElements.addInputEvents($('input[name="occupation[]"]:last'));
},
//remove an input
removeInput:function(oInput_container){
$(oInput_container).remove();
oAutoCompleteElements.counter --;
},
init:function(){
this.addButtonEvents();
this.addInputEvents($('input[name="occupation[]"]'));
}
};
$(function(){
oAutoCompleteElements.init();
});
您可以为所有输入创建一个容器(表单、div等),并使用事件委托。这将允许您不必为每个输入创建事件侦听器。
您的示例代码将是:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var addNewInput = function() {
$('#occupationsContainer').append('<input name="occupation[]" />');
}
/* delete last input from occupationsContainer,
but make sure it's not the first one */
var deleteInput = function() {
$('#occupationsContainer>input').not(':first').remove(':last');
}
/* this listens for keyup event on any input in the element
with id occcupationsContainer */
$('#occupationsContainer').on("keyup", "input", function() {
var occup = $(this).val();
var currentElement = $(this);
if (occup != "") {
$.ajax({
type: "GET",
url: "page_geneoccup.php",
data: {
"occup": occup
},
dataType: 'json',
success: function(responseData) {
var liste_occup = responseData;
$(currentElement).autocomplete({
source: liste_occup
});
return;
},
error: function(XMLHttpRequest, textStatus, errorThrow) {
console.log("Error: " + XMLHttpRequest.status + errorThrow);
return;
}
});
}
});
</script>
</head>
<body>
<button id="addBtn" onclick="addNewInput()">Add</button>
<button id="removeBtn" onclick="deleteInput()">Remove</button>
<div id="occupationsContainer">
<input name="occupation[]" />
</div>
</body>
</html>
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- onkeyup无法动态创建多个文本区域
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 在highcharts.js中向点弹出窗口动态添加文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 动态启用/禁用来自控制器的输入文本
- 如何动态添加和删除多个类名的文本
- 如何在flash html5画布项目中动态更改文本颜色
- 在动态crm 2011中,右键单击已完成活动的只读文本时,您是否出现错误
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- 使用 JavaScript 将文本框的内容作为段落文本动态插入
- 当我点击td时,在jquery中获取td文本动态
- 将文本动态附加到
元素内的 元素会破坏我的设计
- Contentflow-如何使标题文本动态调整大小
- 如何在<text区域>当段落和文本动态地围绕URL时
- 通过内容脚本 - javascript 将文本动态注入 facebook 的共享对话框
- Jquery自动完成输入文本动态创建
- 如何根据预先确定的文本动态调整文本框高度的大小,但页面宽度可变
- 为添加的文本动态添加颜色