Sorry, for this I can't make a Fiddle - it doesn't work.

 

But as some of you know I've been working on this for. The user starts typing in a location, the form then suggests airports.

 

The problem is, people have complained that when loading the site it's extremely slow. I believe this is because I've setup my jQuery autocomplete to reference an XML file which has about 7000 entires and is 1.3mb in size. 1.3mb doesn't sound a lot, but I guess it's slowing the script down.

 

Incidentally, for me it works fine, but I imagine that may be because the browser caches the XML.

 

So..I believe referencing a .txt file may be a better solution. I need to find a way to convert the XML to something along the lines of...

 

Goroka,Goroka,Papua New Guinea,GKA,AYGA,Madang,Madang,Papua New Guinea,MAG,AYMD

 

i.e. all the information, separated by commas. Hopefully, this will drop the file size down and stop the page being slow to load. In theory.

 

The problem is, the jQuery UI documentation doesn't tell you how to reference a .txt file and I don't know enough about jQuery to work it out. It does tell you how to make "a server-side script which returns JSON data".

 

But that just sounds mega complicated and whilst I'm aware of json I have no idea what it is or how to use it.

 

So...any ideas? Do you think converting the XML to a .txt file will be enough to speed it up? Or do I really need to go down the JSON route? Cos if so, I have NO idea where to start

 

I can't even figure out how to do it the .txt file. I wish their documentation was a bit better tbh.

Edited September 16, 201115 yr by brightonmike

I've managed to convert my XML to JSON (I think..).

 

But I don't know how to make the server side script for the auto complete to reference which then pulls that data. The demos don't show you how to do that.

 

E.g.

 

	<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).scrollTop( 0 );
	}

	$( "#birds" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>

 

What's in the search.php?!

Edited September 16, 201115 yr by brightonmike

Search.php just needs to parse the text file containing the airports into an array, discard the ones that don't begin with the characters already typed and return the rest as JSON.

I have no idea how to do that haha.

 

It's all too much for me, I'm just a CSS/HTML guy.

 

Immensely frustrating.

So I now have a text file along the lines of this...

 

Goroka,Goroka,Papua New Guinea,GKA,AYGA
Madang,Madang,Papua New Guinea,MAG,AYMD
Mount Hagen,Mount Hagen,Papua New Guinea,HGU,AYMH
Nadzab,Nadzab,Papua New Guinea,LAE,AYNZ
Port Moresby Jacksons Intl,Port Moresby,Papua New Guinea,POM,AYPY
Wewak Intl,Wewak,Papua New Guinea,WWK,AYWK
Narsarsuaq,Narssarssuaq,Greenland,UAK,BGBW
Nuuk,Godthaab,Greenland,GOH,BGGH

 

I've also found this:http://www.homeandlearn.co.uk/php/php10p7.html

 

But not sure if I'm on the right track.

 

The text file is only 200kb, wouldn't it just be easier to re-write my autocomplete to reference that then bother with all this JSON nonsense which I haven't a clue how to do?

 

Not that I know how to get it to reference the .txt, just I know you can and it's gotta be easier?

Edited September 16, 201115 yr by brightonmike

Ok, assuming your file is comma-separated as above, you'd want something along the lines of:

 

$airports = explode(',', file_get_contents('airports.csv');

$airports_filtered = array();

foreach ($airports as $value) {
   if(substr($value, 0, strlen($q)) == $q) {
       $airports_filtered[] = $value;
   }

$json = json_encode($airports_filtered);

 

Note: this is a very quick & dirty example, but it should give you the idea.

 

Edit - just saw your post. Don't use my code, thought you were just passing it an array of names.

 

So if an airport looks like this:

 

Goroka,Goroka,Papua New Guinea,GKA,AYGA

 

Do you want the autocomplete to match any part of that, or just the Goroka?

Edited September 16, 201115 yr by Renaissance-Design

Any part, as not everybody will know what they're looking for. Plus some people like to search by the codes.

Any ideas guys? Just need it to be able to read from a txt file instead of a XML. It's basically an array inside the txt file...I just don't know how you then have the script read that array.

Not sure if this is of help You've probably seen it already but incase you missed it

Edited September 18, 201115 yr by mteam

That didn't come up for me, great find! Thanks, I'll let you know how it goes...

Nope, doesn't work for me

 

 

Incidentally, this is my JSON: http://beta.jetbookingdirect.com/wp-content/themes/jetbook2012/airports.php

 

I don't know if it's correctly formatted. I've tried using their JSON example and just having the JSON directly in the PHP file but that doesn't work either.

Edited September 19, 201115 yr by brightonmike

$airports = file('airports.csv'); // read file into array, line-by-line

$airports_filtered = array(); // set up array for search results

foreach ($airports as $value) {
   if(strpos($value, $q) != false) { // if search term appears anywhere wthin the string
       $airport_filtered = explode(',', $value; // split by ','
       $airports_filtered[] = $airport_filtered; // add it to the results array
   }

$json = json_encode($airports_filtered); // JSON encode the results to return to the search script

Edited September 19, 201115 yr by Renaissance-Design
Changed to return 2-dimensional array

Ok, so if I place that in a PHP file, in theory if I load that PHP it should return a JSON array from the CSV. I'll give it a shot - thanks!

 

Edit: Bah humbug, no luck. This is my javascript, with the code above in "airports.php".

 

	$(function() {





	$( "#from" ).autocomplete({

		source: "/airports.php",

		minLength: 2,

	});

});

Edited September 19, 201115 yr by brightonmike

Can't get that code to work. There's a curly bracket missing, tried putting it in myself but it won't play ball, even when the code stops throwing up errors it doesn't create a JSON.

 

I swear, this is way too complex than it needs to be, all I wanna do is instead of having an array IN the javascript, have an array in a Text file and call it.

 

It's not even like there's good documentation out there, there isn't, I've scoured the autocomplete documentation and it's so infuriatingly vague.

 

Really appreciate the help so far but currently it looks like I may have to ditch this which considering is was a really important feature of the form is massively disappointing.

Edited September 19, 201115 yr by brightonmike

http://blog.kyd.com.au/convert-csv-to-json-with-php/

 

That seems to half work. In the sense that it does successfully convert the CSV and output it as JSON. Further, when you go to type in the field, a autocomplete box does appear.

 

Problem is it's not outputting the JSON properly so not only does nothing actually come up in the box, but it's pig slow too.

 

So looks like I need to try to combine the two.

any use? http://scottreeddesign.com/project/jsuggest

or just browsing this site http://www.ajaxlines.com/ajax/stuff/article/ajax_and_php_autocomplete_example.php

Can't get that code to work. There's a curly bracket missing, tried putting it in myself but it won't play ball, even when the code stops throwing up errors it doesn't create a JSON.

 

I swear, this is way too complex than it needs to be, all I wanna do is instead of having an array IN the javascript, have an array in a Text file and call it.

 

It's not even like there's good documentation out there, there isn't, I've scoured the autocomplete documentation and it's so infuriatingly vague.

 

Really appreciate the help so far but currently it looks like I may have to ditch this which considering is was a really important feature of the form is massively disappointing.

 

How are you passing it the search term?

How are you passing it the search term?

 

 

I'm doing this, as per instructions on the UI site:

 

	<script>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).scrollTop( 0 );
	}

	$( "#birds" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>

 

 

However, I don't need the first function or the "select" which AFAIK are both used to append a "result".

 

 

So I'm just using:

 

 

	<script> 
$(function() {


	$( "#from" ).autocomplete({
		source: "/airports.php",
		minLength: 2,
	});
});
</script>

 

 

And then in airports.php:

 

 

<?php
header('Content-Type: text/plain'); 
$fileAsArray = Array();

if (($handle = fopen("airports.csv", "r")) !== FALSE) {
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
$fileAsArray[] = $data;
}
fclose($handle);
}

die(json_encode($fileAsArray));

?>

 

As according to the link I've posted above...

THIS http://www.giveupalready.com/content.php?187-jQuery-Autocomplete-Tutorial

 

works!

 

I just need to switch around so instead of loading in a PHP array, it loads the CSV, and make it work with the different information i.e. city name country, airport code.

 

Edit:

 

Working!!!!!!

 

 

<?php

$airports = file('airports.csv');

$term = $_GET['term'];


if(strlen($term) == 2) {
   $UC = strtoupper($term);
   if(isset($airports[$UC])) { $return[] = $airports[$UC]; }
}
foreach($airports as $k=>$v) {
   if(preg_match("/^$term/i", $v)) { $return[] = $v; }
}
foreach($airports as $k => $v) {
   if(preg_match("/$term/i", $v)) { $return[] = $v; }
}
echo json_encode(array_values(array_unique($return)));





?>

 

 

The only thing is when you load the PHP directly, the JSON doesn't look right. But it works?

 

 

http://beta.jetbookingdirect.com/wp-content/themes/jetbook2012/airports.php

Edited September 20, 201115 yr by brightonmike