Try to pass a 2 Dimensionals Array to JQuery Autocomplete

Question

I'm try to pass a 2D array to Jquery Autocomplete input.

This is what my tab looks like : (photo got with firebug)

And the block of code i'm using to create the Array :

public function autocompleteAction()
{

    $this->_helper->layout()->disableLayout();
    $this->getHelper('viewRenderer')->setNoRender();

    if (isset($_GET['term'])) {
        $q = htmlentities($_GET['term']);
        try {
            $bdd = new PDO('mysql:host=' . $config->app->url . ';dbname=' . $config->resources->db->dbname, 'root', '');
            $bdd->exec('SET CHARACTER SET utf8');
        } catch (Exception $e) {
            exit('Impossible de se connecter à la base de données.');
        }
        $requete = "SELECT p.nom,p.winjob_com,p.id_projet,c.titre FROM portail_projet p INNER JOIN portail_client c on c.id_client = p.id_client WHERE p.nom LIKE '%" . $q . "%' OR c.titre LIKE '%" . $q . "%' OR p.winjob_com LIKE '%" . $q . "%' AND p.status = 0";
        $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

        $array = array(
        );
        $i = 0;

        while ($donnee = $resultat->fetch()) { // on effectue une boucle pour obtenir les données
            $array[$i][0] = $donnee['winjob_com'] . " - " . $donnee['titre'] . " : " . $donnee['nom'] . "\n";
            $array[$i][1] = $donnee['id_projet'];
            $i++;
        }

        echo json_encode($array); // il n'y a plus qu'à convertir en JSON
    }
}

And now the JS part :

$("#autoCompleteProjets").autocomplete({
    source: "/index/autocomplete",       
    minLength: 1,
    select: function( event, ui ) {
        console.log( 
            "Selected: " + ui.item.value + " aka " + ui.item.label

        );
    }
});

Thanks in advance for your help.

The error seems to be here : echo json_encode($array); even if i don't receive any clear messages — BYU
– BYU, Commented Jun 7, 2013 at 10:02
Seems? If you check the xhr log in your console, do you see an error in the response? Or an 200 with no text? — Sven van Zoelen
– Sven van Zoelen, Commented Jun 7, 2013 at 10:06
no error in the response : [["347 - APUBE : BECUBE NOEL DOTATION\n","19"],["346 - APUBE : BECUBE NOEL 2012\n","59"],["292 - APCUBE : TEMPS FORT NOEL 2012\n","118"],.......... — BYU
– BYU, Commented Jun 7, 2013 at 10:25

Sven van Zoelen · Accepted Answer · 2013-06-07 13:32:57Z

1

Ok I checked out the documentation of the autocomplete method of jQuery and I think I see the problem. The JSON returned must be in an specific format (after looking at the xhr response of the example on that page):

[{
    id: "id_of_this_item",
    label: "label of option",
    value: "value for the field" 
}, ... ]

Update your PHP to this to make the response in the right format:

public function autocompleteAction() {
    // ...
    if (isset($_GET['term'])) {
    // ...

        $options = array();

        while ($donnee = $resultat->fetch()) { // on effectue une boucle pour obtenir les données
            $temp = array('id'    => $donnee['id_projet'],
                          'label' => $donnee['winjob_com'] . " - " . $donnee['titre'] . " : " . $donnee['nom'], // <-- this the label??
                          'value' => $donnee['id_projet']);

            // add option to options array
            $options[] = $temp;
        }

        die(json_encode($options)); // return JSON
    }
}

Think that this will work, good luck.

PS: I would remove the line minLength: 1, to make fewer requests to the server.

answered Jun 7, 2013 at 13:32

Sven van Zoelen

7,2595 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BYU Over a year ago

Thank you VERY MUCH , it is already way better , the ID just displays instead of the label when i select one line. I don't understand why since i only have this in the "select" section : console.log( "Selected: " + ui.item.label + " aka " + ui.item.value Anyway thanks a lot for your effort

Collectives™ on Stack Overflow

Try to pass a 2 Dimensionals Array to JQuery Autocomplete

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related