linking the AJAX Autocomplete answer from JSON answer to a specific URL/Webpage
I'm trying to link each Ajax Autocomplete result with a specific URL ("landing Page").
URL: www.aebli.com
, search field in the upper right corner, try with "h" or "ho"
Ajax-Code for the Search-Box:
<script type="text/javascript" src="js/dimensions.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript">
$(function(){
setAutoComplete("searchField", "results", "php/autocomplete.php?part=");
});
</script>
here the file "autocomplete.php" which select the specific table form the MySQL Database:
<?php
$link = mysql_connect('localhost', 'root', 'root');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
if (!mysql_select_db("dreampix")) {
echo "Unable to select mydbname: " . mysql_error();
exit;
}
$result = mysql_query("SELECT name FROM treffer");
while ($row = mysql_fetch_assoc($result)) {
$colors[]=$row['name'];
}
mysql_free_result($result);
mysql_close($link);
// check the parameter
if(isset($_GET['part']) and $_GET['part'] != '')
{
// initialize the results array
$results = array();
// search colors
foreach($colors as $color)
{
// if it starts with 'part' add to results
if( strpos($color, $_GET['part']) === 0 ){
$results[] = $color;
}
}
// return the array as json with PHP 5.2
echo json_encode($results);
}
开发者_JAVA百科?>
As you can see on www.aebli.com
, the Search-Field works, try with "ho". The MySQL-Database-Table contents only two rows: id and some entries like "hochzeit". How can I "connect" the AJAX Autocomplete-Results with an <a href="#">
to an specific landing page such as aebli.com/searchresluts
for "hochzeit".php ?
I wish that the user search for "ho", gets an list an can click on one of the results to open the target webpage..
First you should add the url column to the treffer table, so the script knows which URL is each term associated with. Then modify your script so it also returns the URL in the JSON response.
So instead of:
["hochzeit"]
The response will look something like this:
[{"url":"/searchresluts", "name":"hochzeit"}]
Then you need to modify the javascript part. Looking at the autocomplete documentation, I found out you need to replace the default formatItem function. Refer to this answer how to do it.
精彩评论