how to use jquery UI autocomplete 1.8.4?

Question

i want to display suggests like STREET NAME > CITY > COUNTRY (4 different varaibles street,city,country,url that i get in json from the server) and when i chose one it will go to url like a link and will highlight the letters that i type that found in the suggests how can i do it? here is my code

<script type="text/javascript">
    $('#search').autocomplete({
        source: function(req, add){  

            //pass request to server  
            $.getJSON("suggest.php?callback=?", req, function(data) {  

                //create array for response objects  
                var suggestions = [];  

                //process response  
                $.each(data, function(i, val){  
                suggestions.push(val.lable+' '+val.value+' '+val.both);  
            });  

            //pass array to callback  
            add(suggestions);  
            });  
        },  
        select: function(e, ui) {
        $('#search').val(ui.item.lable);
        },
        width: 300,
        max: 10,
        delay: 50,
        minLength: 1,
        scroll: false,
        highlightItem: true
      });
    </script>

server respond

([{"lable":"apartamentos mojácar beach","value":"mojacar","both":"spain"},{"lable":"hotel mandakini grand","value":"new delhi","both":"india"},{"lable":"hotel sol y mar sharming inn","value":"sharm el sheikh","both":"egypt"},{"lable":"la quinta inn and suites sarasota","value":"sarasota","both":"usa"},{"lable":"ocean sand golf and beach resort","value":"punta cana","both":"dominican republic"},{"lable":"rooms barcelona","value":"barcelona","both":"spain"},{"lable":"villa maroc essaouira","value":"essaouira","both":"morocco"},{"lable":" il casale farmhouse with panoramic swimming poo","value":"bettona","both":"italy"},{"lable":" shelley's ","value":"lynton","both":"united kingdom"},{"lable":" 1 melrose blvd by seasons in africa","value":"johannesburg","both":"south africa"}]);

i know the problem is in "SELECT" and "SOURCE" field of autocomple but i dont know how to work with it. how to parse the respond so it can work. it work with only one field but not with 4 fields(vars)

//////////////////////

ok now i can get 3 virables from the server i add them in the source. but i cant select only one all the time it select all the string! how can i manage that?

Answer 1

I don't understand. In what way does your code not work? What does suggest.php look like? If suggest.php is a list of strings formated as you wish it should work fine.

Answer 2

If you want to use jquery ui autocomplete, your data must be "a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both". This is from the documentation at http://jqueryui.com/demos/autocomplete/

Your server response does not follow the expected data type, you should modify suggest.php to post-process the data into label-value pairs.

As I understand it, you also want to perform a custom action when an item is selected from the autocomplete, so you should also add a handler for the 'select' event.