[AJAX] jquery autocomplete, select option

Bonjour à tous,

Je suis débutant en ajax et je souhaite faire une liste déroulante qui charge depuis une base de donnée des éléments.

Mon code fonctionne sauf qu'il retourne une liste <li> qui est affiché dans un bouton input.
Mon problème, je souhaiterai comme retour un <select><option><select> à l'intérieur.
Pour que l'utilisateur ne puisse pas changer le text dedans après sélection…

Est-ce que quelqu'un à une idée?

Code:

1
2
3
4
5
6
 
$("#tags").autocomplete({
        source: "search.php",
        minLength: 1,
        delay: 600
    });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<?php
    // accès sur local
    $hostname = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "autoCompleteTest";
    
    try {
        $conn = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
        // le format Json n'aime pas trop l'iso et le reste :)
        $conn->exec("SET CHARACTER SET utf8");
    }
    catch(PDOException $e) {
        echo $e->getMessage();
    }
    // type de retour
    $return_arr = array();
    // si la connexion est ok on fait la requête
    if ($conn)
    {
        //ajax retourne une variable term en GET
        $term = $_GET['term'];
        //  la colonne qu'on veut afficher
        $colonneAffiche = 'VILLE';
        // limite pour pas faire exploser l'application
        $limit = 10;
        // requete
        $query = "SELECT* FROM cp_autocomplete WHERE VILLE like '$term%' ORDER BY VILLE ASC LIMIT $limit";
        $result = $conn->prepare($query);
        
        if ($result->execute()) {
            // tant que le res est vrai on envoie la ligne
            while ($row = $result->fetch(PDO::FETCH_ASSOC)){
                $row_array['value'] = $row[$colonneAffiche];
                array_push($return_arr,$row_array);
            }
        }
    }
    
    // fermer la connexion
    $conn = null;
    // fermer le curseur
    $result->closeCursor();
    // retour de la requete au format json
    echo json_encode($return_arr);
 
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html>
<html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>jQuery UI Example Page</title>
            <link type="text/css" href="css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
            <link type="text/css" href="chosen/chosen.css" rel="stylesheet" />
            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
            <script type="text/javascript" src="js/ajaxAutocompleteScript.js"></script>
            <script type="text/javascript" src="js/ajaxAutocompleteScript2.js"></script>
            <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
 
    </head>
    <body>
 
    <form method="post" action="?">
 
        <div class="demo">
            <div class="ui-widget">
                <label for="tags3" tabindex="3" >Tags avec cache + loader: </label>
                <input id="tags3" name="champsPersonne" placeholder="chercher une Personne">
            </div>
        </div><!-- End demo -->
 
 
        <input type="submit" />
    </form>
    </body>
</html>

Merci beaucoup à tous pour votre aide!
Très bonne journée et meilleures salutations