Récupérer valeur datalist

Version imprimable

Bonjour,

J'aurais un peu besoin d'aide concernant une datalist. J'ai cette datalist :
Code:

1 2 3 4 5 6 7 <datalist id="searchresults"> <option value="The Hobbit: The Battle of the Five Armies" name="122917">(2014)</option> <option value="The Hobbit: An Unexpected Journey" name="49051">(2012)</option> <option value="The Hobbit: The Desolation of Smaug" name="57158">(2013)</option> <option value="The Hobbit" name="1362">(1977)</option> <option value="The Hobbit" name="99457">(1966)</option> </datalist>
Petite précision, ce n'est pas une datalist "statique". C'est à dire que, en fonction de ce que l'utilisateur tape, j'effectue une requete AJAX qui va chercher les données correspondante. Enfin la n'est pas la question. Mon problème est que j'aimerais recuperer la valeur de l'attribut "name" d'une <option> lorsque l'utilisateur clique sur celle ci. J'aimerais recuperer cette valeur afin de la traiter par la suite. Est ce que cela est possible (car j'ai beaucoup cherché sur internet et les exemples de codes, soit ils ne marchent pas, soit ils ne font pas ce que je veux).

Merci de votre aide :)

Bon j'ai trouvé quelques pistes, je sais que je suis proche du resultat que je veux mais cela ne marche toujours pas.
Voilà comment je construit ma <datalist> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#search").keyup("input", function(e) {
 
                    var val = $(this).val();
                    if(val === "") return;
                    //You could use this to limit results
                    if(val.length < 3) return;
                    console.log(val);
                    $.get("/test/examples/recupererListFilms.php?films="+encodeURIComponent(val), function(res) {
                        var dataList = $("#searchresults");
                        dataList.empty();
                        console.log(res);
                        if(res.Films.length) {
                            for(var i=0, len=res.Films.length; i<len; i++) {
                                var opt = $("<option></option>").attr("value", res.Films[i][0])
                                                                .attr("data-id", res.Films[i][1]);
                                dataList.append(opt);
                            }
                        }
                    },"json");
                });

Ce code peut conduire à créer cette datalist :

Code:

1
2
3
4
5
6
7
8
9
10
 
    <input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="on">
    <datalist id="searchresults">
        <option data-id="286217" value="The Martian"></option>
        <option data-id="116741" value="The Internship"></option>
        <option data-id="122917" value="The Hobbit: The Battle of the Five Armies"></option>
        <option data-id="24428" value="The Avengers"></option>
        <option data-id="156022" value="The Equalizer"></option>
        <option data-id="207703" value="Kingsman: The Secret Service"></option>
    </datalist>

Puis, pour recuperer la valeur du champs data-id de l'<option> selectionné :

Code:

1
2
3
4
5
6
7
8
9
 
$("#search").change(function (){
                    var val = $('#search').val()
                    var id = $('#searchresults option').filter(function() {
                        return this.value == val;
                    }).data("id");
                    console.log(id);
                    alert(id)
                });

Sauf que, la valeur de data-id que j'obtiens en retour est "undefined" ( celle qui s'affiche quand je fais alert(id) ).

J'ai vraiment besoin d'aide :(

Code:

1
2
3
4
5
6
7
8
9
10
11
/*
 * Action après la perte du focus
 * Votre code sur l'événement "blur"
 */
$("#search").on( "blur", function(){
  var val = $('#search').val()
  var id = $('#searchresults option').filter(function() {
      return this.value === val;
  }).data("id");
  console.log(id);
});