...

View Full Version : instant search, i have the code, just one question



ataomega
12-13-2011, 05:59 PM
hello all

i'm almost newbie to Javascript.

i found this for instant search :

demo : http://www.johnboy.com/scripts/instant-search-using-jquery-and-php/index.php

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Instant Search With Arrow Key Navigation Using jQuery and PHP</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="search.js"></script>

<script>

//arrow key navigation
$(document).keydown(function(e){

//jump from search field to search results on keydown
if (e.keyCode == 40) {
$("#s").blur();
return false;
}

//hide search results on ESC
if (e.keyCode == 27) {
$("#results").hide();
$("#s").blur();
return false;
}

//focus on search field on back arrow or backspace press
if (e.keyCode == 37 || e.keyCode == 8) {
$("#s").focus();
}

});
//


$(document).ready(function() {

//clear search field & change search text color
$("#s").focus(function() {
$("#s").css('color','#333333');
var sv = $("#s").val(); //get current value of search field
if (sv == 'Search') {
$("#s").val('');
}
});
//

//post form on keydown or onclick, get results
$("#s").bind('keyup click', function() {
$.post("results.php", //post
$("#search").serialize(),
function(data){
//hide results if no more than 2 characters
if (data == 'hide') {
$('#results').hide();
}

//show results if more than 2 characters
if (data != 'hide') {
$("#results").html(data);
if (data) {
$("#results").show();
}
}
});
});
//

//hide results when clicked outside of search field
$("body").click(function() {
$("#results").hide();
});
//

});


</script>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<h1>Instant Search Using jQuery & PHP</h1>

<h2>Example keywords (website, jquery, php, launch)<br />
<br />
</h2>

<form id="search" name="search" method="post" action="" autocomplete="off">
<input name="s" type="text" id="s" value="Search" />
<div id="results"></div>
</form>


<br />
<br />
<br />

<a href="http://www.johnboy.com/blog/tutorial-instant-search-with-arrow-key-navigation-using-jquery-and-php">Back to Article &amp; Source Code</a>


</body>
</html>


results.php

<?php

require_once('mysql_connect.php');

//only show results if two or more characters have been typed - max of 50 characters
$len = strlen(str_replace(" ","",$_POST[s])); //don't count blank spaces
if ($len < 3 || $len > 50) {
echo 'hide'; die;
}
//

//get results if search string is longer than 3 characters
if ($len > 3) {

record_set('results',
"
SELECT news_title, news_heading,
MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE) AS ranking
FROM jbp_blog_articles
WHERE MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE)
AND news_type = 1
ORDER BY ranking DESC
LIMIT 0,8
");
}


?>

<ul>
<!--display user's initial search term-->
<li><a class="link" href="#" title="<?php echo $_POST[s]; ?>"><?php echo "$_POST[s]"; ?></a></li>
<!---->

<?php if ($totalRows_results) do { ?>
<li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"; ?></a></li>
<?php } while ($row_results = mysql_fetch_assoc($results)); ?>
</ul>

search.js

/*
* Author: Marco Kuiper (http://www.marcofolio.net/)
* Customizations by JBP noted in comments below
*/

var currentSelection = 0;
var currentUrl = '';


// Register keydown events on the whole document
$(document).keydown(function(e) {
switch(e.keyCode) {
// User pressed "up" arrow
case 38:
navigate('up');
break;
// User pressed "down" arrow
case 40:
navigate('down');
break;
// User pressed "enter"
case 13:
if(currentUrl != '') {
window.location = currentUrl;
}
break;
}
});

// Add data to let the hover know which index they have
for(var i = 0; i < $("#results ul li a").size(); i++) {
$("#results ul li a").eq(i).data("number", i);
}

// Simulate the "hover" effect with the mouse
$("#results ul li a").hover(
function () {
currentSelection = $(this).data("number");
setSelected(currentSelection);
}, function() {
$("#results ul li a").removeClass("search_hover");
currentUrl = '';
}
);


function navigate(direction) {

// Check if any of the menu items is selected
if($("#results ul li .search_hover").size() == 0) {
currentSelection = -1;
}

//JBP - focus back on search field if up arrow pressed on top search result
if(direction == 'up' && currentSelection == 0) {
$("#s").focus();
}
//

if(direction == 'up' && currentSelection != -1) {
if(currentSelection != 0) {
currentSelection--;
}
} else if (direction == 'down') {
if(currentSelection != $("#results ul li").size() -1) {
currentSelection++;
}
}
setSelected(currentSelection);
}

function setSelected(menuitem) {

//JBP - get search result to place in search field on hover
var title = $("#results ul li a").eq(menuitem).attr('title');
$("#s").val(title);
//

$("#results ul li a").removeClass("search_hover");
$("#results ul li a").eq(menuitem).addClass("search_hover");
currentUrl = $("#results ul li a").eq(menuitem).attr("href");
}

style.css

#search {
position:relative;
display:block;
height:35px;
width:500px;
padding: 0px;
margin: 0px auto 0px auto;
}

#results {
border:1px solid #CCCCCC;
width:500px;
display:none;
z-index: 300;
line-height:0;
margin-top:-3px;
margin-left: 0px;
}
#results ul {
list-style:none;
padding:0px;
margin:0px;
}
#results ul li {
background-color:#FFFFFF;
text-align: left;
}
#results ul li:hover {
background-color:#EBEBEB;
}
#results ul li a {
line-height:20px;
text-decoration:none;
padding: 5px;
display: block;
color: #333333;
}
.search_hover {
background-color:#EBEBEB!important;
color:#232323!important;
}
body {
padding: 50px;
text-align: center;
background-color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
}
body a {
text-decoration: none;
}
#s {
outline:none;
width: 480px;
padding: 10px;
border: 1px solid #CCCCCC;
color: #CCCCCC;
z-index: 200;
position: relative;
height: auto;
}
.go {
padding: 9px;
font-weight: bold;
width: 60px;
margin-left: -4px;
border: 0px solid #CCCCCC;
height: auto;
font-size: 16px;
background-color: #F7F7F7;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0px;
margin-bottom: 10px;
font-size: 30px;
color: #333333;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0px;
font-size: 12px;
color: #999999;
margin: 0px;
font-style: italic;
font-weight: normal;
}


now i just want to edit one thing, when you search for something, results are shown under the search field, when you click on each result, goes to a link.
i want when clicking on a result, not going to link, just show that result string on the search field.

could you please tell how to do it?

where should i edit in script?

thanks in advanced

mvmacd
12-13-2011, 06:35 PM
Edit: sorta figured out what you meant. Okay.. See this line?


<li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"; ?></a></li>


try changing it to



<li><a class="link" href="javascript: document.search.s.value='<?php echo $row_results[news_heading]; /*var here*/ ?>; return false" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"; ?></a></li>


I'm not sure which string you want. Just change the string [marked with the /*var here*/ comment] to whichever one you want. :thumbsup:

ataomega
12-13-2011, 06:46 PM
first of all thanks for your help

i just want to show result's title on search field.


thanks

mvmacd
12-14-2011, 02:53 AM
Ah, so that would be $row_results[news_title] then? And so I assume my code worked for you? :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum