Discussion :

[Darkaurora]

Bonsoir,

Je n'arrive pas à charger une liste d'item dans ma liste déroulante (select)
En fait j'aimerais trouver l’événement qui appelle cette liste déroulante mais j'ai peur qu'il s'agisse d'un événement natif du navigateur qui m'empêche d'y accéder.

Si quelqu'un aurait une solution voici le code ou je me suis arrêté:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$( '#MonSelect' ).on( 'focus', function( ) { 
	header_ges.CLI.find( 'option' ).remove( ).end( ).append( '<option value="null"> </option>' )
 
	$.get( 'url_vers_mon_php', function ( data ) {
		for( a in data )
		$( '#MonSelect' ).append( '<option value="'+data[a].id+'>'+data[a].raison+'</option>' );
	}, 'json' );
} );

Le problème est que l'événement focus ne va pas du tout...

Merci d'avance pour l'aide

[danielhagnoul]

Bonsoir

Je ne comprends pas la question. Vous pouvez supprimer ou ajouter des options dans un "select" à tout moment, que celui-ci ait le "focus" ou non.

[Bovino]

Essaye sur l'événement click plutôt que focus...

[Darkaurora]

Bonjour et merci de vos réponses.

Le cas concret est que je souhaite chargé une base client à chaque ouverture de la liste déroulante. Or pour ce faire je récupère les informations sur une BDD MySQL via AJAX.

Le call ajax étant asynchrone je ne pouvais pas récupérer les données avant l'ouverture de la liste avec les événements 'focus' & 'click', il me fallait l'événement qui lance l'ouverture de la liste.

Enfin bref j'ai réussi à faire différemment avec la bibliothèque Bootstrap et quelques modifications maison

voila le code pour ceux que ça intéresse.

code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="span3 control-group">
	<label class="" for="CLI">Client Payeur</label>
	<div class="input-append controls span11 btn-group">
		<input type="text" data-type="aln" id="CLI">
		<span class="add-on btn dropdown-toggle" data-toggle="dropdown" id="OCL"> <span class="caret"></span> </span>
	</div>
</div>

code Jquery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$( '#OCL' ).on( 'click', function( ) {
	$.get( '../../ajax/request/devis/client.php', function ( data ) {
		header_ges.CLI.parent( ).find( 'li' ).remove( ).end( );
		client_ges = data, result = []; map = {};
		$.each( client_ges, function ( i, elt ) { map[elt.raison] = elt; result.push( elt.raison ); } );
		header_ges.CLI.typeahead( { source: result } );
		header_ges.CLI.typeahead( 'listing' );
	}, 'json' );
} );

Modification de la bibliothèque Typeahead de bootstrap:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
listing: function () {
      var items = this.source
      var that = this
 
      this.$element.focus()
 
      items = $(items).map(function (i, item) {
        i = $(that.options.item).attr('data-value', item)
        i.find('a').html(item)
        return i[0]
      })
 
      items.first().addClass('active')
      this.$menu.html(items)
 
      this.show( )
    }

j'ai ajouté cette fonction afin d'afficher ma source complète à la manière d'un vulgaire <select> et je la call à chaque fois que j'ai appuyé sur mon bouton #OCL et après avoir chargé mes données.

[Darkaurora]

J'ai créer un plug in qui permet de mieux prendre en charge une liste déroulante et un champ d'autocomplétion.

Code du plug in

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
!function( $ ) {
 
 "use strict";
 
  var Combobox = function ( element, options ) { 
    this.options = $.extend({}, $.fn.combobox.defaults, options)
    this.source = this.options.source
    this.$element = $(element)
    this.$content = this.setup()
    this.$button = this.$element.parent().find('.dropdown-toggle')
    this.$menu = $(this.options.menu)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.shown = false
    this.selected = false
    this.listen()
 
  }
 
  /* NOTE: COMBOBOX EXTENDS BOOTSTRAP-TYPEAHEAD.js
     ========================================== */
 
  Combobox.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
 
    constructor: Combobox
 
  , setup: function () {
      var combobox = $( this.options.wrapper )
      this.$element.wrap( combobox )
      this.$element.after( $( this.options.template ) )
      return combobox
    }  
 
  , toggle: function () {
    var that = this
 
    var items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source
 
    this.$element.focus()
 
    items = $(items).map(function (i, item) {
      i = $(that.options.item).attr('data-value', item)
      i.find('a').html(item)
      return i[0]
    })
 
    items.first().addClass('active')
    this.$menu.html(items)
 
    this.show( )
  }
 
  // modified typeahead function adding container and target handling
  , select: function () {
      var val = this.$menu.find('.active').attr('data-value')
      this.$element.val(this.updater(val)).trigger('change').addClass('combobox-selected')
      this.selected = true
      return this.hide()
    }
 
  // modified typeahead function adding button handling and remove mouseleave
  , listen: function () {
      this.$element
        .on('focus',    $.proxy(this.focus, this))
        .on('blur',     $.proxy(this.blur, this))
        .on('keypress', $.proxy(this.keypress, this))
        .on('keyup',    $.proxy(this.keyup, this))
 
      if (this.eventSupported('keydown')) {
        this.$element.on('keydown', $.proxy(this.keydown, this))
      }
 
      this.$menu
        .on('click', $.proxy(this.click, this))
        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
        .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
        .on('mousedown', $.proxy(this.mousedown, this))
 
      this.$button
        .on('click', $.proxy(this.toggle, this))
    }
 
  // modified typeahead function to clear on type and prevent on moving around
  , keyup: function (e) {
      switch(e.keyCode) {
        case 40: // down arrow
        case 39: // right arrow
        case 38: // up arrow
        case 37: // left arrow
        case 36: // home
        case 35: // end
        case 16: // shift
        case 17: // ctrl
        case 18: // alt
          break
 
        case 9: // tab
        case 13: // enter
          if (!this.shown) return
          this.select()
          break
 
        case 27: // escape
          if (!this.shown) return
          this.hide()
          break
 
        default:
          // this.clearTarget()
          this.lookup()
      }
 
      e.stopPropagation()
      e.preventDefault()
  }
 
  // modified typeahead function to force a match and add a delay on hide
  , blur: function (e) {
      var that = this
      this.focused = false
      var val = this.$element.val()
      if (!this.selected && val !== '' ) {
        this.$element.val('').trigger('change')
      }
      if (!this.mousedover && this.shown) setTimeout(function () { that.hide() }, 200)
    }
 
  // modified typeahead function to not hide
  , mouseleave: function (e) {
      this.mousedover = false
    }
 
  , mousedown: function(e) {
      e.preventDefault()
    }
  })
 
  /* COMBOBOX PLUGIN DEFINITION
   * =========================== */
 
  $.fn.combobox = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('combobox')
        , options = typeof option == 'object' && option
      if(!data) $this.data('combobox', (data = new Combobox(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
 
  $.fn.combobox.defaults = {
    wrapper: '<div class="input-append controls span11 btn-group"> </div>'
  , template: '<span class="add-on btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </span>'
  , menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
  , item: '<li><a href="#"></a></li>'
  }
 
  $.fn.combobox.Constructor = Combobox
 
}( window.jQuery );

Le code ci dessus m'a été inspirer d'un autre plug in que vous pourrez trouver ici : https://github.com/danielfarrell/bootstrap-combobox

Cependant ce plug in avait pas mal de défaut donc j'ai préférer constituer le mien.

code html et initialisation

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" class="selecteur" data-provide="typeahead">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$( '.selecteur' ).combobox( {
  source: [ 'valeur1', 'valeur2', 'valeur3', 'valeur4', 'valeur5', 'valeur6' ]
 } );
// Ou
valeur = [ 'valeur1', 'valeur2', 'valeur3', 'valeur4', 'valeur5', 'valeur6' ]
 $( '.selecteur' ).combobox( {
  source: function( query, process ) {
   result = [];
   $.each( content_ges.client, function ( i, elt ) { result.push( elt.raison ); });
   return result;
  }