11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

dans mon formulaire, j'ai un champ input dans lequel l'utilisateur peut ajouter plusieurs valeurs provenant d'une source telle qu'une table ou un tableau json.

Si l'utilisateur a déjà entré une valeur de cette source, j'aimerais que cette valeur n'apparaisse plus dans la liste des valeurs qui sont proposées dans la liste déroulante à l'utilisateur.

Par exemple, la liste déroulante affiche "PIZZA" et "PATES" quand l'utilisateur tape 'P' dans le choix input. Si l'utilisateur sélectionne "PIZZA", j'aimerais bien que si l'utilisateur ne voit que la valeur "PATES" et plus la valeur "PIZZA" s'il tape encore 'P' dans le champ input.

Pour faire cela, pensez-vous que je dois modifier quelque chose au niveau de la librairie "jQuery UI" ou de la librairie "jQuery" ?

Ou est-ce simplement un paramètre que l'on doit par exemple fournir à la méthode "autocomplete" de "jQuery" ou "jQuery UI" ?

J'ai une 2ème question concernant les valeurs affichées dans la liste déroulante. Dans mon cas, j'affiche la concaténation de 3 valeurs séparées par le caractère spécial '|'. Ces valeurs sont le nom, l'id et l'adresse de l'utilisateur.

Est-il possible de n'afficher que le name dans la liste déroulante et de cacher l'id et l'adresse de l'utilisateur ? J'ai utilisé le mot "cacher" car j'aimerais bien récupérer l'id et l'adresse de l'utilisateur quand le formulaire sera soumis.

Merci d'avance pour votre aide.

Bonne journée à vous,
Thierry
Bonjour aliasdmc,

tout d'abord, je tenais à vous remercier pour votre solution.

En fait, j'aurais une autre question à vous poser.

Dans mon cas, les données input viennent d'un script PHP qui va consulter une table.

Voici ce que fait le script PHP :


<?php
if (isset($_GET['query']))
{
    // Connexion to the database
    require 'includes/connect_db.php';

    $keysearch = $_GET['query'] . '%';

    $sql_search_dishes = $db->prepare("SELECT DISH_NAME as name, DISH_REFERENCE as reference, DISH_ID as id FROM DISHES WHERE DISH_NAME LIKE ? ");
    $sql_search_dishes->execute(array($keysearch));

    $dishesData = array();

    $count_dishes = $sql_search_dishes->rowCount();

    if ($count_dishes > 0)
    {
        while ($dishes_infos = $sql_search_dishes->fetch(PDO::FETCH_ASSOC))
        {
            $dishesData[] = array(
				"name" => $dishes_infos['name'],
				"value" => $dishes_infos['reference'],
				"code" => $dishes_infos['id']
			);
        }
    }

    echo json_encode($dishesData);
}
?>


Donc, je fais passer 3 champs de type key/value : "name", "value" et "code".

Je me demandais comment est-ce que je pouvais faire pour faire passer ces 3 valeurs au script javascript qui va traiter les tags.

Vous pouvez trouver un exemple à l'adresse suivante : https://jsfiddle.net/h5sp8kte/

Merci d'avance pour votre aide.

Bonne journée
Thierry
Modifié par THIRT05 (21 May 2019 - 13:29)