Help with OnClick function
Posted: Thu Mar 18, 2010 3:00 pm
First thing first, here is the link to the page I'm working on.
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.
Here is the code for the search box and the submit button.
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-->