我正在尝试创建一个小搜索框,允许您根据您在输入字段中输入的关键字搜索Twitter。虽然它有效,但只有按下“提交”按钮才有效。我还希望能够按Enter或Return键来启动搜索。我已经尝试使用.sumbit函数并将我的输入包装在表单元素周围但没有成功。任何见解都会非常感激!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function(data) {
$('#startSearch').click(function(){
$('#tweets .results').remove();
var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'
$.getJSON(searchTerm, function(data) {
$.each(data.results, function() {
$('<div class="results"></div>')
.hide()
.append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
.append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
.append('<span class="userText">' + this.text + '</span>')
.append('<time class="textTime">' + relTime(this.created_at) + '</time>')
.appendTo('#tweets')
.fadeIn();
});
});
</script>
<body>
<label id="searchLabel" for="twitterSearch">Search</label>
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true">
<input id="startSearch" type="submit">
<datalist id="searchSugg">
<option value="css3 mulitple backgrounds">
<option value="html5 video">
<option value="responsive web design">
<option value="twitter api">
</datalist>
<div id="tweets">
</div>
</body>
答案 0 :(得分:14)
<script>
$(document).ready(function(){
function(data) {
$('#twitterSearch').keydown(function(event){
if(event.keyCode==13){
$('#startSearch').trigger('click');
}
});
$('#startSearch').click(function(){
$('#tweets .results').remove();
var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'
$.getJSON(searchTerm, function(data) {
$.each(data.results, function() {
$('<div class="results"></div>')
.hide()
.append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
.append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
.append('<span class="userText">' + this.text + '</span>')
.append('<time class="textTime">' + relTime(this.created_at) + '</time>')
.appendTo('#tweets')
.fadeIn();
});
});
</script>
或 - 以前的提案:
<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true" >
答案 1 :(得分:5)
如果你想要地方事件没有突兀的js,那么你也可以使用这个系统:
$("#element").keydown(function(event) {
if (event.keyCode == 13) {
// do stuff
}
如果你有一个提交按钮,这是另一种选择,#element必须是你想要捕获事件的文本字段。
参考:answer
答案 2 :(得分:0)
尝试为按键和鼠标单击创建侦听器。
function myFunction(e){
if (e.which=='13' || e.type=='click'){
// Run your code here
}
}
$(document)
.on('click', '#startSearch', myFunction)
.on('keypress', this, myFunction);