You can see when you type in a restaurant name the search box returns some autosuggest results and you're able to click on them and it'll fill in the search box for you.
The next step I want to take is anytime a autosuggest result it selected it fills the search box and submits the value. I'm not sure what I need to do from here. Any help would be greatly appreciated.
My guess would be that I need to add something in with the onclick function.
Here is the code for the autosuggest.
Code: Select all
<?php
include("../include/opendbconnection.php");
$db = new mysqli("$hostname", "$username" ,"$password", "$database");
if(!$db) {
echo 'ERROR: Could not connect to the database.';
} else {
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
if(strlen($queryString) >0) {
$query = $db->query("Select * from tbl_restaurantinfo Where txtsearch Like'".$queryString."%' Order By name Limit 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.addslashes($result->display_name).'\');">'.$result->display_name.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
include("../include/closedbconnection.php");
?>Code: Select all
<!--jquery sceript needed for autocomplete function-->
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<!--End of jquery for autocomplete function-->
<!--Start of autocomplete search box-->
<script type="text/javascript" src="lib/ajax_framework.js"></script>
<table class="contactsleft" cellspacing="0"><tr>
<tr><th class="contact">Restaurant Search</th></tr>
<td class="contactleft">
<form action="search_result.php" method='POST' enctype="multipart/form-data"/>
<input type='text' autocomplete="off" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" size='18' name='txtsearch'/>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<!--<img src="upArrow.png" style="position: relative; top: -12px; left: 60px;" alt="upArrow">-->
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<br />
<input type='submit' value='Search'></form></td></tr>
</table>
<br />
<!--End of autocomplete function-->