I was hoping someone could assist with this. I've got a page with a basic autosuggest drop down, I would like a particular div "con" to be hidden if the variable "id" in the url (index.php) is not set and then to display if it is set. The idea behind this is similar to Google in that when a user goes to index.php initially they see no results as these are displayed in the "con" div which is initially hidden. As the user types in the search box and then clicks on a drop down result, the con div is displayed which itself contains dynamic content based on the particular result that the user clicked on. Please could you assist as currently the con div is displayed as soon as the user goes to the index page and if there are better ways to achieve this please let me know. I have 3 files index.php; search.php; and index.js. I have left out a basic connect.php file. The "names" table contains 2 columns - "id" and "name".
index.php:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.elastic.js"></script>
<link rel="stylesheet" type="text/css" href="status.css">
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes.split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var id = getUrlVars()["id"];
$(".con").hide();
if($(id!='undefined'));
{
$(".con").show();
}
});
</script>
</head>
<body>
<h1>Test</h1>
<div class="c_search">
<span id='box'>
<input type ='text' id='search_box' /> <button id="search_botton">Search</button>
</span>
<div id='search_result'>
</div>
<script src='index.js'></script>
</div>
<div class="con">
Show me/Don't show me
</div>
</body>
</html>
search.php:
<?php
include 'connect.php';
// please, be more careful about SQL injection... use some protection at least...
//$value = $_POST['value'];
$value = mysql_real_escape_string($_POST['value']);
$query = mysql_query("SELECT * FROM names where name like '%$value%'");
while($run = mysql_fetch_array($query)){
$name = $run['name'];
$id = $run['id'];
echo '<a href=index.php?id='.$id.'>'.$name.'<br/>';
}
?>
index.js:
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != '') {
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
}
});
});
It seems you have an error with your JS code (on getUrlVars function):
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
for(var i = 0; i < hashes.length; i++)
{
// you're splitting the entire array, you should split 1 item so hashes[i]
// hash = hashes.split('=');
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Also you're not closing the a tag: echo '<a href=index.php?id='.$id.'>'.$name.'</a><br/>'