我正在嘗試使用 Javascript 創建一個動態表單，可以在其中添加更多欄位。當用戶開始在添加的欄位中輸入時，建議應該基于串列顯示。基于書面意見的建議意見
添加的欄位應與1中所示的欄位相似。搜索功能通過使用 querySelector 來獲取創建的新欄位。但是，我收到一個型別錯誤說：TypeError: Cannot read properties of null。
該功能在沒有 的情況下作業newSearch(i)，但我希望在添加更多欄位時出現此建議框。
源代碼：
網站.html
<div class="sites-container">
<form class="sites-form" method = "POST" id="myForm" name="myForm">
<div class="wrapper">
<div id="Site-options">
<h1 class="sites-add-header"> Create a String </h1>
<p class="sites-add-text"> Choose Modules at String </p>
<div class="wrapper2">
<div class="search-input2">
<a href="" target="_blank" hidden></a>
<input type="text" placeholder="Type to search.." name="PV-modules">
<div class="autocom-box2">
</div>
<div class="icon2"><i class="fas fa-search"></i></div>
</div>
</div>
</div>
<div class="controls">
<a href="#" id="add_more_fields"><i class="fa fa-plus"></i>Add Another String</a>
<a href="#" id="remove_fields"><i class="fa fa-plus"></i>Remove Site</a>
</div>
</div>
<button type="submit" class="sites-add-site button">Add Site</button>
</form>
</div>
<script>
let suggestions2 = {{ modules | safe}} ;
</script>
<script src="{{ url_for('static', filename='add-site.js') }}"></script>>
添加-site.js
var site_options = document.getElementById('Site-options');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');
var count = 1;
add_more_fields.onclick = function(){
var i = count ;
var _div = document.createElement('div');
_div.setAttribute('id','new-div' i);
_div.innerHTML = '<p > Choose Modules at Site </p>'
'<div >'
'<div id="new-search-input' i ' ">'
'<a href="" target="_blank" hidden></a>'
'<input type="text" placeholder="Type to search.." name="PV-modules">'
'<div new-autocom-box' i '">'
'</div>'
'<div id="new-icon' i '><i ></i></div>'
'</div>'
'</div>';
newSearch(i);
site_options.appendChild(_div);
};
remove_fields.onclick = function(){
var elem = document.getElementById("new-div");
elem.parentNode.removeChild(elem);
}
function newSearch(i) {
// getting all required elements
var searchWrapper2 = document.querySelector("#new-search-input" i);
var inputBox2 = searchWrapper2.querySelector("input"); // <- Here i get TypeError
var suggBox2 = searchWrapper2.querySelector(".autocom-box2");
var icon2 = searchWrapper2.querySelector(".icon2");
let linkTag2 = searchWrapper2.querySelector("a");
let webLink2;
// if user press any key and release
inputBox2.onkeyup = (e2)=>{
let userData2 = e2.target.value; //user enetered data
let emptyArray2 = [];
if(userData2){
icon2.onclick = ()=>{
webLink2 = `https://www.google.com/search?q=${userData2}`;
linkTag2.setAttribute("href", webLink2);
linkTag2.click();
}
emptyArray2 = suggestions2.filter((data2)=>{
//filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
return data2.toLocaleLowerCase().startsWith(userData2.toLocaleLowerCase());
});
emptyArray2 = emptyArray2.map((data2)=>{
// passing return data inside li tag
return data2 = `<li>${data2}</li>`;
});
searchWrapper2.classList.add("active"); //show autocomplete box
showSuggestions2(emptyArray2);
let allList2 = suggBox2.querySelectorAll("li");
for (let i = 0; i < allList2.length; i ) {
//adding onclick attribute in all li tag
allList2[i].setAttribute("onclick", "select2(this)");
}
}else{
searchWrapper2.classList.remove("active"); //hide autocomplete box
}
}
function select2(element){
let selectData2 = element.textContent;
inputBox2.value = selectData2;
icon2.onclick = ()=>{
webLink2 = `https://www.google.com/search?q=${selectData2}`;
linkTag2.setAttribute("href", webLink2);
linkTag2.click();
}
searchWrapper2.classList.remove("active");
}
function showSuggestions2(list){
let listData2;
if(!list.length){
userValue2 = inputBox2.value;
listData2 = `<li>${userValue2}</li>`;
}else{
listData2 = list.join('');
}
suggBox2.innerHTML = listData2;
}
}
uj5u.com熱心網友回復：
newSearch添加元素后需要呼叫
site_options.appendChild(_div);
newSearch(i);
并且您需要洗掉 中的額外空格innerHTML，這就是id找不到屬性的原因，從而破壞了所有代碼：
'<div class="search-input2" id="new-search-input' i '">'
uj5u.com熱心網友回復：
交換這兩行應該可以正常作業。searchWrapper2 在您的情況下為空。
newSearch(i); site_options.appendChild(_div);
site_options.appendChild(_div); newSearch(i);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471229.html
標籤：javascript html 查询选择器