Instant search

Instant search
2011-06-23T09:30:21+02:00
2011-06-23T12:12:26+02:00
2022-11-22T06:35:39+01:00
Körtécske
Sziasztok!

Egy olyan instant search vezérlőt próbáltam keresni, mint amilyen a google-n van vagy a facebookon.
Találtam is egy tutorialt, de még mindig nem működik és nem jövök rá a hibára.

Segítsetek légyszi, ha tudtok!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <script type="text/javascript" src="instant_search.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <title></title> </head> <body> <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> <?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}%' "); $results = array(); while($v = mysql_fetch_object($sql)){ $results[] = array( 'title' => $v -> title, 'post' => $v -> post ); } echo json_encode($results); } ?> <form method="get" action="instant_search.php"> <input type="text" id="q" name="q" /> <input type="submit" value="Search" /> </form> <div id="results"></div> </body> </html>
Mutasd a teljes hozzászólást!
http://akosbeke.hu/input-mezo-kiegeszitese-jquery-segitsegevel/

nézd meg ezt a tutorialt, ez biztosan müködik :)
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd