as you type selection shows to select from

jasonc · June 4, 2010

I have a large mysql database with every airport in the world and wish for my visitors to start typing in the field and this is then checked letter by letter for all the airports that have the phrase typed, then a list is shown that they can select from.

a bit like yahoo search engine when you start to type in a word it gives you words or phrases to choose from.

how can i do this?

ignace · June 4, 2010

You would use Ajax.

[tt]<input type="text" value="" onchange="lookup(this)">

function lookup(input) {

jQuery.getJSON('http://domain/path?query=' + input.value, function(data) {

var lookupResult = document.getElementById('lookupResult');

lookupResult.addElement(..);

..

});

}

dabaR · June 4, 2010

The autocomplete text field is implemented and the usage well documented here: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

jasonc · June 4, 2010

You would use Ajax.

[tt]<input type="text" value="" onchange="lookup(this)">

<ul id="lookupResult"></ul>

function lookup(input) {

jQuery.getJSON('http://domain/path?query=' + input.value, function(data) {

var lookupResult = document.getElementById('lookupResult');

lookupResult.addElement(..);

..

});

}

Hi

thanks for your help, but i do not understand some of the code..

lookupResult.addElement(..);

..

});

i figured out that this bit is javascript and have only managed to get this far...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Suggest as you type</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function lookup(input) {
  jQuery.getJSON('http://domain/path?query=' + input.value, function(data) {
    var lookupResult = document.getElementById('lookupResult');
    lookupResult.addElement(..);
    ..
  });
}
</script>
</head>

<body>

<form name="form" action="">
<input type="text" value="" onchange="lookup(this)">
<ul id="lookupResult"></ul>
</form>

</body>
</html>

i have no idea how this works or what i do.

jasonc · June 4, 2010

i have this file which i think is what will get the data?

<?
// get airport list
$query =$_GET['query'];
include("database.php");
$res = db_query("SELECT * FROM `list_of_airports` WHERE `airport` LIKE '%" . $db_input($query) . "%' LIMIT 20");
foreach ($res as $phrase) {
echo($phrase);
}
?>

ignace · June 4, 2010

Use dabar's suggestion it's easier to implement then mine. As my reply requires a good working knowledge of CSS and JS (+jQuery +formats)

jasonc · June 4, 2010

I opted to using this following code from this site.

http://woork.blogspot.com/2008/03/php-components-autosuggest.html

all is ok until i click on one of the suggestions, it does not select this and place it in the field.

this is the code i currently have.

ajax_search_for_airport_framework.js

/* ---------------------------- */
/* 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', 'ajax_search_for_airport.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";
}
}
}

ajax_search_for_airport_autosuggest_TEST.php

<!-- AJAX AUTOSUGGEST SCRIPT -->
<script type="text/javascript" src="ajax_search_for_airport_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>Search with Auto Suggest</h1>
<input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
</div>

database.php

this file has my database login details.

ajax_search_for_airport.php

<?php 
// ---------------------------------------------------------------- // 
// DATABASE CONNECTION PARAMETER 									// 
// ---------------------------------------------------------------- // 
// Modify config.php with your DB connection parameters or add them //
// directly below insted of include('config.php'); 					//

include('database.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 = 'list_of_airports';
$SQL_WHERE = 'airport';

?>
<?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['airport']; ?> <small><?php echo $row['country']; ?></small></a></li>
<?php } 
echo '</ul>';
?>
<?php } ?>

dabaR · June 4, 2010

You will thank yourself once you start using jQuery.

jasonc · June 4, 2010

i learn from examples mainly, like most i hope.

i have taken a look but got lost rather quickly so opted to finding another way based on another code i have tried, username already taken.

the code i have works, but i am unable to click the suggestions and have it placed in the field i an typing in.

this is the only problem with this code, but have yet to find out why it is not working as expected.

ignace · June 4, 2010

the code i have works, but i am unable to click the suggestions and have it placed in the field i an typing in.

I don't see any code that does.

jasonc · June 4, 2010

puzzled by your reply, ignace.

i posted my code in a previous post.

or did you mean you do not see anything in the code that would do this ? (when suggestion is clicked it would be placed in the field)

dabaR · June 4, 2010

Ya, there is definitely no code that would place the value of what you click on into the input field as far as I can see either.

jasonc · June 5, 2010

I have taken a look around the site i got the code from and found the zip i got did not have all the code.

altered it as the site says and now it is working.

but....

it only works in IE8 not FireFox

can anyone see why this is not working in FF ?

i have now uploaded the files to the following page.

working demo as well.

[redacted]/ajax_autocomplete for the files..

and the demo via...

[redacted]/ajax_autocomplete/ajax_search_for_airport_autosuggest_TEST.php

also what would be great to have is a way to use the script more than once in the same page?

Edited June 10, 2017 by requinix

jasonc · June 5, 2010

sorry.. it is working in FireFox after all. i am now only using my demo scripts and not using them in my page i wish to have them in just yet.

but i would still like to have the script reusable in the same page.

could this be recoded so i can do this ?

dabaR · June 5, 2010

sorry.. it is working in FireFox after all. i am now only using my demo scripts and not using them in my page i wish to have them in just yet.

but i would still like to have the script reusable in the same page.

could this be recoded so i can do this ?

You can usually extract the <style>...</style> into a CSS file, then include it with the <link ... /> tag. Same for javascript, just take the "..." from <script>...</script> and place into separate file, which you then include with <script src="file.js"></script>.

jasonc · June 5, 2010

sorry not what i was thinking, i will do this once the standalone files work, but at present i can only have this working on a single field in one page.

i wish to use the same method on two or more fields which allow you to autocomplete with the same data from mysql.

think of it as a pick your start airport and end airport in the same page.

<div id="search-wrap">
<h1>Select your first choice here.</h1>
<input name="search-1" id="search-1" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
</div>

<div id="search-wrap">
<h1>and your second here.</h1>
<input name="search-2" id="search-2" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
</div>

i have been playing around with the code a bit and tried the following...

[redacted]/ajax_autocomplete2 for the files..

and the non working demo via...

[redacted]/ajax_autocomplete2/ajax_search_for_airport_autosuggest_TEST.php

Edited June 10, 2017 by requinix

dabaR · June 5, 2010

Oh, well...

You can't pick how you are going to use the autosuggest() call. It says to give it 2 parameters, one for the field id, other for the thing that will be populated with possible results.

<h1>Search with Auto Suggest</h1>
<input name="fieldid-1" id="fieldid-1" type="text" onkeyup="javascript:autosuggest('fieldid-1','resultsid-1')"/>
<div id="resultsid-1" class="results"></div>

All you do is make a copy of that, with fieldid-2 and resultsid-2, should be pretty straightforward.

jasonc · June 6, 2010

i tried that and it is not working.

please check the following page for non working demo and files

[redacted]/ajax_autocomplete2 for the files..

and the non working demo via...

[redacted]/ajax_autocomplete2/ajax_search_for_airport_autosuggest_TEST.php

Edited June 15, 2017 by requinix

dabaR · June 6, 2010

i tried that and it is not working

...

and the non working demo via...

[redacted]/ajax_autocomplete2/ajax_search_for_airport_autosuggest_TEST.php

It works just fine in my Firefox 3.6.3 on Ubuntu.

Edited June 10, 2017 by requinix

Sign In

as you type selection shows to select from

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information