Discussion :

[colas31]

Hello,

J'essai d'étendre le ui autocomplete, en lui rajoutant des fonctions et options.
Le js :

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
(function($) {
    $.widget('ui.autocompletecustom', $.ui.autocomplete, {
 
        options: {
 
            blur_clear_input: false,
            token_alone: true,
            max_item: 1,
            multiple: '',
            url: null,
            max_return_item: 20,
            type_item: ''
        },
 
        _create: function() {
 
 
            var self  = this;
 
            if (self.options.max_item > 1) {
                self.options.multiple = true;
            } else {
                self.options.multiple = false;
            }
 
            $.ui.autocomplete.prototype._create.call(this);
 
            $('.remove_text').live("click", function() {
                $(this).parent().remove();
 
                self._disable_enable_autocomplete();
            });
 
            //add click handler to the div
            $(".autocomplete_div").click(function(){
                $("#autocomplete_input").focus();
            });
 
            // Bind all function change / select
           this.element.bind( "autocompleteselect", function(event, ui) {
                console.log('test');
            });
            this.element.live('change', function() {
                    console.log("change");
 
                if (self.options.blur_clear_input) {
                    clear_input(false);
                } else {
                    var text = $("#autocomplete_input").val();
                    if (self.options.multiple || self.options.token_alone) {
                        self._create_token(text);
                    } else {
                        $('#autocomplete_input_true').val(text);
                    }
                }
            });
 
        },
 
        _create_token: function(value) {
            var self = this;
            self._clear_input();
 
            var	span = $("<span>").text(value);
            var	a = $("<a>").addClass("remove_text").attr({
                href: "javascript:",
                title: "Remove " + value
            }).text("x").appendTo(span);
 
            span.insertBefore("#autocomplete_input");
            self._disable_enable_autocomplete();
//            complete_true_input();
        },
 
        _get_count_item: function() {
            return $('.autocomplete_div span').length;
        },
 
       _disable_enable_autocomplete: function() {
           var self = this;
           var count_items =  self._get_count_item();
 
           if (count_items == self.options.max_item) {
               $('#autocomplete_input').prop('disabled', true)
                                        .css('display', 'none');
           } else {
               $('#autocomplete_input').prop('disabled', false)
                                        .css('display', '')
                                        .focus();
           }
       },
 
        _clear_input: function() {
            $('#autocomplete_input').blur()
                                    .val('')
                                    .focus();
        },
        select_itemp: function(event, ui) {
           console.log("new");
        }
    });
})(jQuery);

Dans mon html j'ai :

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
$(function(){
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }
 
    $("#autocomplete_input").autocompletecustom({
        max_item: 2,
        minLength: 2,
 
        source: function(request, response){
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) );
            console.log(request.term);
        },
        select: function(event, ui) {
            console.log("from config.select");
        }
 
    });
});

Dans je déclare mon select dans le html il est executé, mais je souhaite avoir cet event dans mon js, via : this.element.bind( "autocompleteselect", ...) mais qui ne m'affiche rien dans les log.
j'ai essayé this.element.bind( "select", ...) mais idem.

Le change quand a lui fonctionne parfaitement via le live.

1 - Pour coutourner ce problème j'essaye d'appeler une fonction 'select_item' dans le select du html mais je ne trouve pas le code pour le faire

2 - Comment puis je résoudre mon problème en faisant marcher mon select dans le js?

Merci de votre aide