2016-01-20 83 views
0

我找不到为什么.getJSON在通过条件语句调用父函数时抛出错误。当if语句被注释掉时,似乎没有问题,并且.getJSON被调用。但是,我希望用户完成其输入(通过按Enter键指示)。

的HTML

<div class="text-center searchBar"> 
    <form action=""> 
    <input type="text" id="searchText" /> 
    </form> 
</div> 

<div class="container displayResults"> </div> 

的JavaScript:

$(document).ready(function() { 
    $('#searchText').keyup(function(e) { 
    var searchItem = $('#searchText').val(); 
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem; 

    if(e.which == 13) { //if user returns enter key 
     wikiCall(link); 
    }  
    }); 
}); 

function wikiCall(wikiLink) { 
    $.getJSON(wikiLink, function(searchResults) {  
    for (var i = 0; i < searchResults.query.pages.length; i++) { 
     $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>"); 
     $(".displayResults").append("<br>"); 
    } 
    }).fail(function(jqxhr,textStatus,error){ 
    alert(textStatus+": "+error); 
    }); 
} 
+3

什么是错误..? – fzxt

+2

您可能想尝试禁用表单提交事件。 ('submit',function(e){e.preventDefault(); return false;});'''当用户按下回车键时避免表单提交。在将数据附加到主体之前,还要检查响应是否具有“查询”键。 – LucasFerreira

+1

@LucasFerreira谢谢,避免输入时按下提交表单提供的技巧。 – CodingerSK

回答

2

我测试你的软件,我只得到一个错误:KEYUP代替按键正停止传播。

在下面的代码:

function wikiCall(wikiLink) { 
 
    $.getJSON(wikiLink, function(searchResults) { 
 
    for (var i = 0; i < searchResults.query.pages.length; i++) { 
 
     $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>"); 
 
     $(".displayResults").append("<br>"); 
 
    } 
 
    }).fail(function(jqxhr,textStatus,error){ 
 
    alert(textStatus+": "+error); 
 
    }); 
 
} 
 
$(function() { 
 
    $('#searchText').keypress(function(e) { 
 
    var searchItem = $('#searchText').val(); 
 
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem; 
 

 
    if(e.which == 13) { //if user returns enter key 
 
     wikiCall(link); 
 
     e.preventDefault(); 
 
    } 
 
    }); 
 
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 
<div class="text-center searchBar"> 
 
    <form action=""> 
 
     <input type="text" id="searchText" /> 
 
    </form> 
 
</div> 
 

 
<div class="container displayResults"> </div>

当你输入一个字符的事件顺序: 的keydown,按键,KEYUP。

对于前两个事件,您可以预防,但无法防止在键入事件中键入的字符。

关键事件是您最后听到的事件,您只能说:好吧,这是我采取行动的角色,但我无法防止此特征的效果,如表单提交。

当键入新行的三个事件的结果是:

KEYDOWN键代码= 13 = 13则charCode = 0

按键键代码= 13 = 13则charCode = 13

KEYUP keyCode = 13 which = 13 charCode = 0

+0

我正在对待他们类似的:keyup,keypress,keydown。我很高兴能够使用按键压制默认值,但我很困惑为什么使用keyup无法做到这一点。 – CodingerSK

+0

我想出了上面我自己的问题的答案:在提交后触发了键控,因此无法取消。 – CodingerSK

+0

@CodingerSK我更新了答案:是的,你无法停止表单提交。 – gaetanoM