CODEWITHSUNDEEP
phpjqueryjsonautocomplete
BYU
BYU

Reputation: 73

Try to pass a 2 Dimensionals Array to JQuery Autocomplete

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

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

http://hpics.li/6221d85

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.

Upvotes: 0

Views: 787

Answers (1)

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

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.

Upvotes: 1

Related Questions