2015-06-29 106 views
-1

所以这是有点难以字,但我会尽我最大的努力使这本无可厚非:)显示功能(JavaScript的)

我正在推动个人助理的命令中的属性的建议(以都知道:开发的早期阶段),基本上用户可以输入不同的命令或问题,助理将回答问题或完成任务。例如,如果用户键入文本框“什么时候?”会出现一个对话框,它将包含对话框中的时间。所以我想要的是,当用户输入(例如)“什么”时,它会建议“现在是什么时间”,因为这是该函数中的一个属性(当我发布代码时,您会理解)。

这里是JavaScript(遗憾的混乱):

// JavaScript Document 

function searchKeyPress(e){ 
     e = e || window.event; 
     if (e.keyCode == 13){ 
      document.getElementById('btn').click(); 
     } 
} 
function command() { 
    var srchVar = document.getElementById("srch"); 
    var srch = srchVar.value; 
    var expression = /[[email protected]:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[[email protected]:%_\+.~#?&//=]*)?/gi; 
    var regex = new RegExp(expression); 
    var t = srch; 

    if(srch == '') { alert('Please do not leave the field empty!'); } 

    else if(srch.indexOf('about') != -1) { alert('The function of this project is to complete simple tasks and sometimes answer simple questions. \n\nMade by Omar Latreche. \n\n(c) Copyright Omar Latreche 2015'); } 

    else if(srch.indexOf('commands') != -1) { window.location = "commands.html"; } 

    else if(srch.indexOf('time') != -1) { alert('The current time according to your computer is' + ShowTime(new Date())); } 

    else if(srch.indexOf('what') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('when') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('where') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('why') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('how') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('who') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch.indexOf('?') != -1) { if (confirm('I can see that is a question. Would you like to search Google for the answer?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
    else { /* Nothing */ }; } 

    else if(srch === 'okay assistant') { alert('Hello! How can I help you?'); } 

    else if(srch.indexOf('weather') != -1) { window.open('https://www.google.com/#q=weather', '_blank'); } 

    else if(t.match(regex)) { window.open(srch, '_blank'); } 

    else { if (confirm('I am sorry but I do not understand that command. Would you like to search Google for that command?') == true) { window.open('https://www.google.com/#q=' + srch, '_blank'); } 
     else { /* Nothing */ } 
    } 
} 
//Show time in 12hour format 
var ShowTime = (function() { 
    function addZero(num) { 
     return (num >= 0 && num < 10) ? "0" + num : num + ""; 
    } 

    return function (dt) { 
     var formatted = ''; 

     if (dt) { 
      var hours24 = dt.getHours(); 
      var hours = ((hours24 + 11) % 12) + 1; 
      formatted = [formatted, [addZero(hours), addZero(dt.getMinutes())].join(":"), hours24 > 11 ? "PM" : "AM"].join(" ");    
     } 
     return formatted; 
    } 
})(); 

下面是HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Tiny Assistant</title> 
<script type="text/javascript" src="script.js"></script> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="cont_title"> 
    <span class="title">Tiny</span><span class="title2"> Assistant</span> 
</div> 
<div class="cont"> 
    <input name="srch" id="srch" class="search" spellcheck="false" onkeypress="searchKeyPress(event);" placeholder="Type &quot;Okay Assistant&quot;" type="text" /> 
</div> 
<div style="margin-top:10px" class="cont"> 
    <!--<input type="submit" onClick="command();" class="button" value="Done" id="btn" />--> 
    <button type="submit" id="btn" aria-label="Done" class="button" onClick="command();"> 
     <span class="btn_txt">Done</span> 
    </button> 
</div> 
<div style="margin-top:10px" class="cont"> 
    <span class="info">&copy; Copyright Omar Latreche 2015. All rights reserved.</span> 
</div> 
</body> 
</html> 

我的文章抱歉,这是我能想到的唯一办法说出来。我希望你明白我想说的话。

回答

1

请你看看这个:

https://jqueryui.com/autocomplete/

+1

它会容易得多。 – guergana

+0

非常感谢!我会测试这个以确保它的工作,但它看起来很有前途! –

+0

欢迎。确保导入jquery.js和query-ui(http://jqueryui.com/download/all/)以使其正常工作! – guergana