Link to home
Start Free TrialLog in
Avatar of gegabone
gegabone

asked on

Autocomplete field using Jquery/PHP/MySQL

Hi All,

I have a conundrum,

I've developing a site that I want to have a auto complete field so that users can start typing their destination and the nearest matches appear, Using the Jquery UI auto complete function.

However I'm thinking that having the database being queried all the time will lead to this box being slow.

For example
I have a table for insurance groups, domestic, world, world inc US etc

In the country table each country tuple is assigned the foreign key in the database of the region they belong too.

There are around 200 countries in the world, what would be the quickest more efficient way to develop this functionality in such a away that this search box is responsive.
ASKER CERTIFIED SOLUTION
Avatar of jimmym715
jimmym715

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of gegabone
gegabone

ASKER

Cheers will give it a go, will be back in a bit to rate the answer
I have this for my auto complete, below is the JSON string

{"United Arab Emirates":["ARE","UK4","Worldwide excluding USA, Canada and the Caribbean"],"United Kingdom":["GBR","UK1","Within the UK"],"United States":["USA","UK5","Worldwide including USA, Canada and the Carribbean"]}

and in the code snippet is the ajax call to return it, I can't work out how to get the auto complete to use the source as the drop down box as currently it's not working.

Can't anyone spot the problem?
var autocomplete = new function (){
    this.init = function() {
        $('#insurance_destination').autocomplete({source: lookup});  
    }
    
    function lookup(){
         $.ajax({  
            url: "scripts/php/autocomplete.php",
            data: {query:this.term},
            dataType: "json",
            cache : false, 
            success: function(data) {    
                for(key in data){
                  return {
                         label: key,
                         value: data[key][0]
                         }
                }                                    
            }      
    });
    }
}

Open in new window

Ended up going towards a JSON route instead