How can I implement this JS code in my HTML and PHP?
Question
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.
The JS code is:
$(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:
<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. 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.
I know a bit of basic PHP and HTML, but virtually no JS, I am half way through the W3 tuts :p
How can I change my HTML and JS code so they will work together?
I would be so grateful for any answers at all, thanks in advance!
2 answers
solution1
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. You can download JQuery to your own server and link it there, but you may benefit from including JQuery from Google .
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.
solution2
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 . 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>
<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:
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 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.