从用户输入中获取 JS 对象数据

接受标准：输入姓名，并在单击或按"返回"时将人员的分机号返回到UI。

我正在寻找有关如何使其工作的建议。

用户界面

<html>
<head>
<title>SearchFunction</title>
</head>
<body>
<script type="text/javascript">
var extensionList = {
Abby: '8845',   
David: '8871',  
Jim: '8890', 
Lewis: '8804',
};
var returnLookUp = function(){
var getInfo = document.getElementById("thisSearch");
var SearchInfo = thisSearch.value;
/*......?*/
}
</script>
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick = "returnLookUp();">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>
</body>
</html>

没有定义显式按钮类型。所以默认情况下它将是按钮type ="submit".在这种情况下，它将尝试提交表单。可以使用按钮type="button"或防止默认行为，preventDefault()可以使用

extensionList[thisSearch.value]用于从对象获取键的值，extensionList是对象，thisSearch.value将是与对象的键相同的输入

var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value = extensionList[thisSearch.value];
}

<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick="returnLookUp(event);">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>

相关内容

最新更新

热门标签：