Home of the ColdFusion Community
|
Mailing Lists
|
Home /
Groups /
Ajax
AJAX Autosuggest Textfield / JavaScript question
Author: The Web Guy
Short Link: http://www.houseoffusion.com/groups/ajax/thread.cfm/threadid:2115#6428
Hello,
I'm kinda a newbie when it comes to AJAX but I have just completed my first
Autosuggest text field for a website that I am working on. You can see an
example of it here:
http://www.joshuaneil.com/autosuggest/autosuggest.php
It will display a list of US states when you type in a letter to the text
box. I would suggest you use the letter 'M' as it is the best example.
So far everything is working well but the next step I am having problems
with. I NEED TO BE ABLE TO SELECT ONE OF THE STATES WITH EITHER THE ARROW
KEYS OR MOUSE CLICK AND HAVE THE SELECTED STATE SHOW UP IN THE TEXT FIELD.
I know this can be accomplished by using JavaScript events but I am
uncertain of how to go about doing this..??? if anyone has any suggestions
on how I can accomplish this I would deeply appreciate the info!
I am using the following files for this example:
autosuggest.php
lib/ajax_framework.js
lib/search.php
lib/config.php
I have included all the code that is in the four files listed above.
// autosuggest.php code is below
<!-- AJAX AUTOSUGGEST SCRIPT -->
<script type="text/javascript" src="lib/ajax_framework.js"></script>
<style type="text/css">
/* ---------------------------- */
/* CUSTOMIZE AUTOSUGGEST STYLE */
#search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px;
border:solid 1px #999999;}
#results{width:260px; border:solid 1px #DEDEDE; display:none;}
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
#results li {border-top:solid 1px #DEDEDE;}
#results li a{display:block; padding:4px; text-decoration:none;
color:#000000; font-weight:bold;}
#results li a small{display:block; text-decoration:none; color:#999999;
font-weight:normal;}
#results li a:hover{background:#FFFFCC;}
#results ul {padding:6px;}
</style>
<div id="search-wrap">
<h1></h1>
<input name="search-q" id="search-q" type="text"
onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
</div>
ajax_framework.js code is below
/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}
config.php code is below (this is just the DB connection stuff)
<?php
// REQUIRED! Parameters to connecto to your DB
// CHANGE ONLY $db_host, $db_name, $username, $password
$db_host="hostname";
$db_name="somedatabase";
$username="someuser";
$password="topsecret";
// DON'T CHANGE THE FOLLOWING CODE!
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>
search.php code is below
<?php
//
---------------------------------------------------------------- //
// DATABASE CONNECTION PARAMETER
//
//
---------------------------------------------------------------- //
// Modify config.php with your DB connection parameters or add
them //
// directly below insted of include('config.php');
//
include('config.php');
//
---------------------------------------------------------------- //
// SET PHP VAR - CHANGE THEM
//
//
---------------------------------------------------------------- //
// You can use these variables to define Query Search
Parameters: //
// $SQL_FROM: is the FROM clausule, you can add a TABLE
or an //
// expression: USER
INNER JOIN DEPARTMENT... //
// $SQL_WHERE is the WHER clausule, you can add an table
//
// attribute for
ezample name or an //
$SQL_FROM = 'states';
$SQL_WHERE = 'statename';
?>
<?php
$searchq = strip_tags($_GET['q']);
$getRecord_sql = 'SELECT * FROM '.$SQL_FROM.'
WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"';
$getRecord =
mysql_query($getRecord_sql);
if(strlen($searchq)>0){
//
---------------------------------------------------------------- //
// AJAX Response
//
//
---------------------------------------------------------------- //
// Change php echo $row['name']; and $row['department']; with
the //
// name of table attributes you want to return. For Example, if
you //
// want to return only the name, delete the following code
//
// "<br /><?php echo $row['department'];></li>"//
// You can modify the content of ID element how you prefer
//
echo '<ul>';
while ($row = mysql_fetch_array($getRecord)) {?>
<li><a href="#"><?php echo
$row['statename'];
?></a></li>
<?php }
echo '</ul>';
?>
<?php } ?>
Thanks again for your help!
- Josh
|
May 23, 2013
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
