CODEWITHSUNDEEP
javascriptphpjquery
Kuartz
Kuartz

Reputation: 41

Change value of input when choosing in a autocomplete list

I have this code :

<script type="text/javascript">
$('#rechercheVilleChargement').autocomplete({
    source : 'http://localhost:8080/SuiviCollectes/MODEL/autocomplete.php',
    minLength : 2,
}
<div class="form-group">
                    <label for="ville_chargement" class="col-sm-3 control-label">Ville de chargement :</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="ville_chargement" id="rechercheVilleChargement">
                    </div>
                    <label for="dpt_chargement" class="col-sm-3 control-label">Département :</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" name="dpt_chargement">
                    </div>
                </div>

    <?php

try
{
    $bdd = new PDO('mysql:host=localhost;dbname=x;charset=utf8', 'x', 'x');
    array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);
}
catch(Exception $e)
{
    die('Erreur: ' . $e->getMessage());
}

$term = $_GET['term'];

$requete = $bdd->prepare('SELECT * FROM villes WHERE ville_nom LIKE :term ORDER BY ville_population_2012 DESC LIMIT 15'); // j'effectue ma requête SQL grâce au mot-clé LIKE
$requete->execute(array('term' => '%'.$term.'%'));

$array = array(); // Création du tableau

while($donnee = $requete->fetch())
{
    array_push($array, $donnee['ville_nom']); // Ajout de la donnée au tableau
}

echo json_encode($array); //Conversion en Json

And it works ! But, I would like to have something different in my list than what i get in my input.

Example : My JSON will be like "PARIS (01)" and when I click on it in the list, my input become "PARIS".

Thank you very much for your help.

Upvotes: 1

Views: 188

Answers (1)

4b0
4b0

Reputation: 22323

On autocomplete you can use option select and change the selected value as desire. Ans is assuming that your autocomplete value is always in same pattern.

$("#rechercheVilleChargement").autocomplete({
     // Your other options ;
    select: function (a, b) {
        $(this).val(b.item.value).split('(')[0];

    }
});

Upvotes: 1

Related Questions