在自动完成列表中选择时更改输入值

时间:2016-12-23 08:18:49

标签: javascript php jquery

我有这段代码:



<script type="text/javascript">
$('#rechercheVilleChargement').autocomplete({
    source : 'http://localhost:8080/SuiviCollectes/MODEL/autocomplete.php',
    minLength : 2,
}
&#13;
<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>
&#13;
&#13;
&#13;

    <?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

它有效!但是,我希望列表中的内容与我输入的内容不同。

示例:我的JSON将像&#34; PARIS(01)&#34;当我在列表中点击它时,我的输入变为&#34; PARIS&#34;。

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:1)

在自动填充功能上,您可以使用选项select并根据需要更改所选值。 Ans假设您的自动完成值始终采用相同的模式。

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

    }
});