如何在不点击文本字段的情况下让ajax显示表格列表
How to make ajax show table list without clicking the text field
我使用ajax创建了一个实时搜索,效果非常好。但是问题是,我需要首先单击输入字段来显示所有列出的数据。原因可能是keyup
函数。我不知道用什么来代替它。我确实尝试过更改焦点等等,但ajax根本没有显示我的数据。我不熟悉ajax。
这是我的输入代码和ajax。
<p style="text-align: center">Enter your search here: <input type="text" id="search" name="search" placeholder="Enter your search here"> <b><i>ex: d1234567891.. hazwan.. etc.. </i></b></p>
<div id="result" class="login"></div>
<script type="text/javascript">
$(document).ready(function(e) {
$("#search").keyup(function() {
$("#result").show();
var x = $(this).val();
$.ajax({
type:'POST',
url:'res.php',
data:'q='+x,
cache:false,
success:function(data){
$("#result").html(data)
}
});
});
});
</script>
</div>
这是我的数据库代码和显示结果。
//print_r($_GET);
$q=$_POST['q'];
$query="SELECT *
FROM
viewlibrary
WHERE
studentname LIKE :q OR
matricno LIKE :q OR
title LIKE :q OR
programme LIKE :q OR
serialno LIKE :q
ORDER BY studentname ASC";
$stmt = $db->prepare($query);
$stmt->bindValue(':q','%'.$q.'%');
$stmt->execute();
$a = 0;
if($stmt->rowCount() > 0){
$r=$stmt->fetchAll();
echo "<table class='tablesorter' id='myTable' style='width:97%; table-border: 1'>";
echo "<thead>";
echo "<tr>";
echo "<th>No.</th>";
echo "<th>No.Matric</th>";
echo "<th>Name</th>";
echo "<th>Programme</th>";
echo "<th>Title</th>";
echo "<th>Serial Number</th>";
echo "<th>Availability</th>";
echo "<th>Edit</th>";
echo "<th>Delete</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach($r as $row){
echo "<tr align='center'><td>". ($a+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td><a href='editpage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/edit-icon.png' width=15px></a></td><td><a href='deletepage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/remove-icon-png-15.png' width=15px></a></td></tr>";
$a++;
}
echo "</tbody>";
echo "</table>";
}
else{
echo "<p align='center'>Nothing to show you :( I am really sorry for this T_T </p>";
}
?>
每当我对ajax代码进行编辑时,它就不再运行了。我试着在互联网上查找,但找不到适合ajax的。因此,我实际上想要的是显示页面加载时列出的所有数据,而不是在用户单击输入字段之后。
请帮忙。
您是否尝试过将ajax移动到一个单独的函数?
Ex。
function ajaxSearchUpdater(){
$("#result").show();
var x = $('#search').val();
$.ajax({
type:'POST',
url:'res.php',
data:'q='+x,
cache:false,
success:function(data){
$("#result").html(data)
}
});
}
$(document).ready(function(e) {
ajaxSearchUpdater(); // fires on document.ready
$("#search").keyup(function() {
ajaxSearchUpdater(); // your function call
}
}
相关文章:
- 如何在没有ajax的情况下将javascript动态数据发送到php变量
- 如何在不使用ajax的情况下将pair值添加到数组并发送到django中的视图
- Ajax:只在元素存在的情况下调用Ajax
- (Ajax)在不重新加载内容的情况下登录页面url
- AJAX函数在没有警报的情况下无法工作
- 如何在不使用处理程序的情况下使用ajax将文件从客户端发送到服务器端
- 如何在没有表单提交、没有js、没有jquery和没有ajax的情况下将输入的文本框值存储到php变量中
- 如何在没有 Ajax 的情况下将图像拖放到 servlet
- 如何在没有JQuery的情况下,通过对服务器的基本ajax调用,根据浏览器上的用户活动保持服务器会话活动
- 通过位置栏更改查询字符串,AJAX加载的菜单不会't在没有硬刷新的情况下重新填充
- 如何在发送时不打开新页面的情况下使用php/ajax发送表单
- 在不执行ajax请求的情况下,使用jQuery读取HTTP标头以检查404
- 防止在没有ajax的情况下提交后重定向表单
- 如何在不使用AJAX刷新的情况下发送表单的数据
- 在以下情况下,如何使用AJAX实现删除功能
- 在没有表单的情况下通过AJAX上传图像
- 如何在没有Ajax的情况下将blob存储在表单中,并在单击提交时将其发送到服务器
- Ajax-函数在没有调用或单击的情况下启动
- 如何在没有 AJAX 的情况下调用上一页
- 在没有ajax的情况下将多个变量传递到引用页面的最佳方式