what kind of AJAX suggestion this website using?

[shahzad429]

Check below website

 

http://www.emirates.com/ae/english/index.aspx

 

In flight search what kind of AJAX suggestion they have used?

if i search "dxb" or "Dubai" "united arab emirates" after user choose option it change the text with system defaul for that airport which is "Dubai (DXB)"

 

 

I am making same kind of website this is client requirement.

 

 

Thanks  in advance.

 

 

[monkeytooth]

its likely a JSON get/post request to a sub php file that queries the database for whatever you type in, then returns the results in a manor that the javascript can interpite and use to then alter the elements of the DOM without reloading the page.

[xangelo]

Once the page has loaded, it creates an AJAX request that returns in XML format. This data contains things like the airport code, city etc. It queries: http://www.emirates.com/system/aspx/IBEAirportsXML.aspx?pub=/ae/english/&mode=2

 

When you type, JavaScript looks through the data that it already has and only shows you the relevant data. This way, it doesn't need to request any data on every key-stroke so things seem a lot faster.

 

 

[shahzad429]

Thankyou xangelo to explain me in detail i will try to do some thing like this hope it will work for me.

 

You have any sample for this or tutorial so that it will be easy for me to do this..

 

 

Thanks again.

[monkeytooth]

This is a really basic xml/rss reader script I made some time ago for my own purposes you will of course need to tweek it for your own needs, and tweek it to read the XML data from the site it will be generating the information on. But aside from this you will need to form a JSON request to this PHP file with the constraints you will want to pass to get the data that's relevant. In its current state its good for basic useage when a page loads but its going to have to be altered for use with a JSON request. I keep mentioning JSON because you want this ajax driven. JSON is what passes data back and forth between the front end and backend scripts without reloading the page every time. AJAX is just a coined term for using JavaScript and Server Side scripting together, in most cases PHP as PHP is popular and can query databases where as javascript alone can not.

 

<?php
//$feedURL = 'News.xml';
$feedURL = 'http://www.monkeytooth.net/feed/';
$doc = new DOMDocument();
$doc->load($feedURL);
$arrFeeds = array();
foreach ($doc->getElementsByTagName('item') as $node) {
$itemRSS = array ( 
   'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
   'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
   'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
   'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
   'creator' => $node->getElementsByTagName('creator')->item(0)->nodeValue,
   'permaz' => $node->getElementsByTagName('guid')->item(0)->nodeValue
);
array_push($arrFeeds, $itemRSS);
//print_r($arrFeeds);
}
array_unique($arrFeeds);
?>
<?php
$classIt = "bdyCL2a";
$maxlimit = 0;
foreach($arrFeeds as $arrItem){
if($classIt == "bdyCL2a"){$classIt = "bdyCL2b";}elseif($classIt == "bdyCL2b"){$classIt = "bdyCL2a";}else{$classIt = "bdyCL2a";}
$jobTitle = $arrItem['title'];
$jobDesc = $arrItem['desc'];
$jobLink = $arrItem['link'];
$creator = $arrItem['creator'];
$permd = $arrItem['permaz'];
echo "<div class=\"".$classIt."\"><strong><a href=\"".$jobLink."\" target=\"_blank\">".$jobTitle."</a></strong><br />".$jobDesc."<br />Contributer: ".$creator."</div>";
$maxlimit = $maxlimit+1;
if($maxlimit == 5){break;}
}
?>

 

an example of that in use is http://www.tvariable.com if you scroll to the bottom of the page you will see the feed its generating from. Also bare in mind this really isnt something I use outside of personal use on sites I run and maintain so its a bit sloppy and a bit reused from site to site that i use it on. But the general idea is the ability to read an XML output in this case a RSS feed which is the same thing.. from a wordpress feed. But I have used it on various things like feeds from monster.com to feeds from 365gay.com depends on the need and purpose.. and its over all easy to edit.

[xangelo]

[*]AJAX is not a coined term when actually referring to Asynchronous JavaScript and XML.

[*]JSON has nothing to do with asynchronous or even synchronous JavaScript. It is simply an object notation.

[*]There is no such thing as a "JSON request". It is a request. You may either choose to utilize JSON to pass data back to your server-side script, or you can choose not to. You can also choose to include the data directly into the URL you are accessing.

 

What you actually want shahzad429 is simply an XML file that contains all the data you need. This file can either be generated utilizing a database and a server-side scripting language, or you can just have a static file if your data won't change very often.

 

Using JavaScript (I'd recommend looking at a utilizing a library like jQuery or MooTools, because trying to handle the different browsers is a hassle) you'd create an AJAX request passing the URL of your XML file. Depending on which library you use, you may have to specify that you are returning XML data.

 

Once you get your data, you will need to parse it and store it in an array.

 

When a user presses a key in your textbox, simply look through this array using some kind of loop and show them the matching values.