Current Situation:
I'm in the process of building a future search box for customer information that is stored in a mysql database. I have the search box working, and pulling correct data. I need the results to be clickable and access links to different pages. I.E. when John Doe is searched, that name will come up below the search box half way between typing. The results (that match whatever is typed) show below the search box and changed based on characters in the box. The results are what I need to be clickable.
Working (but not completed) code for future search:
<?php
$key=$_GET['key'];
$array = array();
$con = mysql_connect ("localhost","username","password");
$db = mysql_select_db ("database",$con);
$query = mysql_query ("SELECT * from customer_table WHERE customerAddress LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
$array[] = $row['customerAddress'];
$array[] = $row['customerName'];
}
echo json_encode($array);
?>
I understand this code should be mysqli however I could not get the search to work that way.
Next, is the html file for the search:
<html>
<head>
<title>Customer Search Box</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'presearch.php?key=%QUERY',
limit : 10
});
});
</script>
<style type="text/css">
.bs-example{
font-family: sans-serif;
position: relative;
margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
<body>
<div class="row">
<div class=".col-md-6">
<div class="jumbotron">
<h1>Customer Future Search Box <small>Company Name</small></h1>
<button type="button" class="btn btn-primary btn-lg">Home</button>
</div>
</div>
<div class=".col-md-6">
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="on" spellcheck="false" placeholder="Type your Query">
</div></div></div></div>
</body>
</html>
What I've tried so far:
In an attempt to make the search results clickable (linked to different pages).
<?php
$key=$_GET['key'];
$array = array();
$con = mysql_connect ("192.169.197.209","azzip_admin","sXf(Z1AKZtT0");
$db = mysql_select_db ("azzip_default",$con);
$query = mysql_query ("SELECT * from customer_table WHERE customerAddress LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
}
?>
<a href= <?php $array[] = $row['customerAddress'];?>
<a href= <?php $array[] = $row['customerName'];?>
<?php
}
echo json_encode($array);
?>
That not only broke my future search, it didn't create any links.
Any help or even pointing in the right direction would be greatly appreciated. Thanks in advance.
