如何在HTML和PHP中实现此JS代码？
[英]How can I implement this JS code in my HTML and PHP?
问题描述
I found this JS function, which acts like Google instants, by searching and only showing results that have the search in their title of a DIV of Button. 
通过搜索并仅显示在按钮的DIV标题中具有搜索结果的结果，我发现了此JS函数的功能类似于Google即时。
The JS code is: JS代码是：
$(function() {
var theTable = $('table.food_planner')
theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){
$(this).prev().find(":checkbox").click()
});
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
$('#filter-form').submit(function(){
theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
return false;
}).focus(); //Give focus to input field
});
My HTML form looks like this: 我的HTML表单如下所示：
<body>
<div class="main">
<form method="get" action="quiz.php" id="form">
<p class="subFont">Search Quizzes</p>
<input type="text" id="search" name="search"/><br>
<button type="submit[]" class="quizBlock" name="button" id="quizID" action="quiz.php" method="get" value="<?php echo $quiz[$i]['ID']?>">
<p><?php echo $quiz[$i]['Name']?></p>
</button>
</form>
</div>
</body>
There is a little bit more to this form, and some PHP. 这种形式还有一些PHP。 The PHP uses a for loop and prints how ever many buttons there is data for, each one will have a different value, and a different contents that needs to be searched. PHP使用for循环并打印有多少按钮用于数据，每个按钮将具有不同的值，以及需要搜索的不同内容。
I know a bit of basic PHP and HTML, but virtually no JS, I am half way through the W3 tuts :p 我知道一些基本的PHP和HTML，但实际上没有JS，我在W3教程中已经过了一半：p
How can I change my HTML and JS code so they will work together? 如何更改HTML和JS代码，以便它们可以协同工作？
I would be so grateful for any answers at all, thanks in advance! 我将非常感谢您的任何答复，在此先感谢您！
2 个解决方案
解决方案1
0 2011-11-04 16:27:27
You will need to add the script to your page, like this: 您需要将脚本添加到页面中，如下所示：
<script type="text/javascript">
// Your script goes here
</script>
Besides that (and before that, in the HTML page!), you should include the JQuery library, because it is used by your script. 除此之外（在此之前，在HTML页面中！），您应该包括JQuery库，因为它由脚本使用。 You can download JQuery to your own server and link it there, but you may benefit from including JQuery from Google . 您可以将JQuery下载到您自己的服务器上并链接到该服务器，但是您可以从Google的JQuery中受益。
Optionally, you can put your script in a separate file to, and link it in your page. （可选）您可以将脚本放在一个单独的文件中，并将其链接到页面中。 Since you don't have to do any actual Javascript programming, I think someone with knowledge of PHP and html should be able to include a script in their page. 由于您不必进行任何实际的Javascript编程，因此我认为具有PHP 和 html知识的人应该可以在其页面中包含脚本。
解决方案2
0 2011-11-04 16:58:35
If you are looking to query the server for information and have it appear instantly on the page, you should use an AJAX-based (Asynchronous Javascript and XML Request) approach . 如果您要查询服务器的信息并使其立即显示在页面上， 则应使用基于AJAX的（异步Java脚本和XML请求）方法 。 Below is a simple example of how to accomplish this. 以下是如何完成此操作的简单示例。 You should be aware that this is a simple example intended to illustrate how this works, but not necessarily an example of best practices. 您应该意识到，这是一个简单的示例，旨在说明其工作原理，但不一定是最佳实践的示例。
The html markup could be similar to the following: html标记可能类似于以下内容：
<html>
<head>
<title>Instant Search</title>
<script type=”text/javascript” src=”../jquery.js”></script>
<script type="text/javascript">
var runningRequest = false;
var request;
//Identify the typing action
$('input#q').keyup(function(e){
e.preventDefault();
var $q = $(this);
if($q.val() == ''){
$('div#results').html('');
return false;
}
//Abort opened requests to speed it up
if(runningRequest){
request.abort();
}
runningRequest=true;
request = $.getJSON('search.php',{
q:$q.val()
},function(data){
showResults(data,$q.val());
runningRequest=false;
});
//Create HTML structure for the results and insert it on the result div
function showResults(data, highlight){
var resultHtml = '';
$.each(data, function(i,item){
resultHtml+='<div class="result">';
resultHtml+='<h2><a href="#">'+item.title+'</a></h2>';
resultHtml+='<p>'+item.post.replace(highlight, '<span class="highlight">'+highlight+'</span>')+'</p>';
resultHtml+='<a href="#" class="readMore">Read more..</a>'
resultHtml+='</div>';
});
$('div#results').html(resultHtml);
}
$('form').submit(function(e){
e.preventDefault();
});
});
</script>
</head>
<body>
//Form
<form method=”get” action=”">
<input type=”text” id=”q” name=”q” />
<input type=”submit” value=”Search” />
</form>
//Result’s Container
<div id=”results”></div>
</body>
</html>
The css: CSS：
form{
margin:15px;
padding:5px;
border-bottom:1px solid #ddd;
}
form input[type=submit]{display:none;}
div#results{
padding:10px 0px 0px 15px;
}
div#results div.result{
padding:10px 0px;
margin:10px 0px 10px;
}
div#results div.result a.readMore{color:green;}
div#results div.result h2{
font-size:19px;
margin:0px 0px 5px;
padding:0px;
color:#1111CC;
font-weight:normal;
}
div#results div.result h2 a{
text-decoration:none;
border-bottom:1px solid #1111cc;
}
div#results div.result p{
margin:0;
padding:0;
}
span.highlight{
background:#FCFFA3;
padding:3px;
font-weight:bold;
}
The PHP server-side code: PHP服务器端代码：
<?php if(!empty($_GET['q'])) {
search();
}
function search() {
$con = mysql_connect('localhost','root', '');
mysql_select_db('mydb', $con);
$q = mysql_real_escape_string($_GET['q'], $con);
$sql = mysql_query("
SELECT
p.title, SUBSTR(p.post,1,300) as post
FROM Posts p
WHERE p.title LIKE '%{$q}%' OR p.post LIKE '%{$q}%'
");
//Create an array with the results
$results=array();
while($v = mysql_fetch_object($sql)){
$results[] = array(
'title'=>$v->title,
'post'=>$v->post
);
}
//using JSON to encode the array
echo json_encode($results);
}
Original source: http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/ 原始来源： http ： //woorkup.com/2010/09/13/how-to-create-your-own-instant-search/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.