2017-08-01 27 views
1

验收标准:输入一个名称并将其人员的扩展返回到onClick或按“返回”时。从用户输入中获取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> 
+0

'''的返回extensionList [SearchInfo]''' – Wainage

+0

如果我的名字 '大卫' 型我想页面返回他的分机,8871.我可以得到 通过使用console.log(extensionList.Jim)从extensionList对象获取信息,但我无法执行任何类似console.log(extensionList.SearchInfo)的操作。 –

+0

重新阅读我的代码。不'''extensionList.SearchInfo'''但是'''extensionList [SearchInfo]'''。如果'''searchInfo ='Jim''''它将等于'''extensionList [“Jim”]'''这与'''extentsionList.Jim'' – Wainage

回答

0

有被定义没有明确的按钮式。所以默认情况下它将是按钮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>