如果按下输入按钮,我一直在努力尝试触发该按钮。我尝试过触发()和点击()但没有运气。我不明白为什么它不会执行,并且当用鼠标单击时搜索按钮可以正常工作,但在按下回车按钮时却不能正常工作。
$(document).ready(function() {
//alert("this");
//$('#btnsearch').trigger('click');
$("#txtsearch").keyup(function(event){
if(event.keyCode == 13){
$("#btnsearch").click();
}
});
$('#btnsearch').click(function(event) {
var searchText = $('#txtsearch').val();
$.ajax({
url: domain + "",
type: "GET",
headers: {
Accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(index, item) {
$('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>');
}
)};
event.preventDefault();
});
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="navbar-form navbar-right">
<div id="" class="navbar-form navbar-right">
<div class="input-group">
<input id="txtsearch" type="text" class="form-control" placeholder="Search" />
<div class="input-group-btn">
<button id="btnsearch" class="btn btn-default" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</div>
</form>
最佳答案
由于您的 input
已包含在 form
元素中,因此默认情况下您会获得此行为,因此 keyup
处理程序是多余的。
您遇到的更大问题是代码中的几个语法错误,您可以在运行问题中的代码片段时在控制台中看到这些错误。
- 您已经在 jQuery 之前添加了 Bootstrap。一定是相反的
- 您对
preventDefault()
的调用位于$.ajax
设置对象内,并导致语法错误 $.ajax
中的success
处理函数未正确关闭。
当您解决这些问题时,它就可以正常工作:
$(function() {
$('.navbar-form').submit(function(e) {
e.preventDefault();
var searchText = $('#txtsearch').val();
$.ajax({
url: domain,
type: "GET",
headers: {
Accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(index, item) {
$('#tblResult tbody').append('<tr><td><a href="' + item.Details + '">' + item.Title + '</td></tr>');
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="navbar-form navbar-right">
<div id="" class="navbar-form navbar-right">
<div class="input-group">
<input id="txtsearch" type="text" class="form-control" placeholder="Search" />
<div class="input-group-btn">
<button id="btnsearch" class="btn btn-default" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</div>
</form>
关于jquery - 如果单击输入按钮,则返回搜索结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44966069/