Javascript 删除表单标记，但保留输入功能

我发现了一段代码，它的工作方式与我想要的非常接近。最终的结果是，当您在输入字段中键入内容时，将根据文本输入在下面显示相关选项的列表。然后，您可以单击其中一个选项，而不必键入完整字符串

唯一的问题是，当我尝试将此代码改编为我现有的项目时，它会中断，因为输入字段被包装在表单中。如何修改此代码，使其以完全相同的方式运行，而不必将输入标记包装到表单元素中？也就是说，只有一个输入字段

(
函数（）
{
变量查找=[
“巴黎”，
“加拿大”，
“英格兰”，
“苏格兰”，
“巴西”，
“马尼拉”，
“亚特兰大”
];
var form=document.getElementById（“theForm”）；
var resultsDiv=document.getElementById（“结果”）；
var searchInput=form.search；
//首先，定位结果：
var节点=搜索输入；
var x=0；
var y=0；
while（节点！=null）
{
x+=node.offsetLeft；
y+=node.offsetTop；
node=node.offsetParent；
}
resultsDiv.style.left=x+“px”；
resultsDiv.style.top=（y+20）+“px”；
//现在，将keyup处理程序附加到搜索字段：
searchInput.onkeyup=函数（）
{
var txt=this.value.toLowerCase（）；
如果（txt.length==0）返回；
var txtRE=新的RegExp（“（“+txt+”）”、“ig”）；
//现在…我们有火柴吗？
var-top=0；
for（var s=0；s=0）
{
srch=srch.replace（txtRE，“$1”）；
var div=document.createElement（“div”）；
div.innerHTML=srch；
div.onclick=函数（）{
searchInput.value=this.innerHTML.replace（/\/ig，”）；
resultsDiv.style.display=“无”；
};
div.style.top=top+px；
top+=20；
结果附子组（div）；
resultsDiv.style.display=“block”；
}
}
}
//和键控处理程序：
searchInput.onkeydown=函数（）
{
while（resultsDiv.firstChild！=null）
{
resultsDiv.removeChild（resultsDiv.firstChild）；
}
resultsDiv.style.display=“无”；
}
}
)();
.searchInput{
宽度：200px；
}
#结果{
显示：无；
位置：绝对位置；
宽度：200px；
背景颜色：浅黄色；
z指数：10；
}
#成绩组{
位置：绝对位置；
宽度：200px；
高度：20px；
背景色：白色；
光标：指针；
溢出：隐藏；
}
#结果div:hover{背景：浅蓝色；}
#结果分区跨度{
颜色：红色；
字体大小：粗体；
}

搜索：
因为在这段代码中，它依赖于
表单
元素来获取
输入
元素：

  var form = document.getElementById("theForm");
  var resultsDiv = document.getElementById("results");
  var searchInput = form.search;

除此之外，不需要
表单
。因此，您可以改为：

  var resultsDiv = document.getElementById("results");
  var searchInput = document.getElementsByClassName("searchInput")[0];

或者将
输入
元素更改为
id
为
“searchInput”
而不是
类
，然后执行以下操作：

  var resultsDiv = document.getElementById("results");
  var searchInput = document.getElementById("searchInput");

因为在这段代码中，它依赖于
表单
元素来获取
输入
元素：

  var form = document.getElementById("theForm");
  var resultsDiv = document.getElementById("results");
  var searchInput = form.search;

除此之外，不需要
表单
。因此，您可以改为：

  var resultsDiv = document.getElementById("results");
  var searchInput = document.getElementsByClassName("searchInput")[0];

或者将
输入
元素更改为
id
为
“searchInput”
而不是
类
，然后执行以下操作：

  var resultsDiv = document.getElementById("results");
  var searchInput = document.getElementById("searchInput");

它之所以会中断，是因为输入字段被包装在表单中。为什么在现有项目中使用表单标记会中断它？您可能想改为修复它。它会中断，因为输入字段被包装在表单中。为什么在现有项目中使用表单标记会中断它？您可能希望改为修复该问题。