自定义jquery-ui自动完成组合框的一些麻烦

Question

I want use a autocomplete/ComboBox like a filter. I customize the code from jqueryUI to give same form like a selectMenu. And I want use select and change event and triger change event on Enter keypress.

Here my code :

$.widget("custom.TFOAutoCombo", {

_create: function () {
    var nam = this.element.attr("id").split("lstFiltreAuto");
    this.element.hide();
    this.wrapper = $("<span>", { "class": "ui-state-default TFOcustom-combobox SizCol" + nam[1] }).appendTo($('#acc-container' + nam[1]));
    this._createAutocomplete(nam[1]);
    this._createShowAllButton(nam[1]);
},

_createAutocomplete: function (nam) {
    var selected = this.element.children(":selected"),
                  value = selected.val() ? selected.text() : "";

    this.input = $('<input class="ui-state-default TFOcustom-combobox-Input ui-corner-all" placeholder="TOUS">').appendTo(this.wrapper).val(value)
                  .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source"), appendTo: '#acc-container' + nam })
                  .tooltip({ classes: { "ui-tooltip": "ui-state-highlight" } });
    this._on(this.input, {
        autocompleteselect: function (event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); },
        autocompletechange: function (event, ui) { var ret = this._removeIfInvalid(event, ui); if (ret != null) { this._trigger("change", event, { item: ret }); } }
    });
    this.input.keypress(function (e,ui) {
        if (e.which == 13) {
            var ret = this._removeIfInvalid(e, ui); if (ret != null) { this._trigger("change", event, { item: ret }); }
        }
    });
},

_createShowAllButton: function (nam) {
    var input = this.input, wasOpen = false;
    $('<span class="ui-icon ui-icon-triangle-1-s TFOcustom-combobox-Fleche">').appendTo(this.wrapper)
          .on("mousedown", function () { wasOpen = input.autocomplete("widget").is(":visible"); })
          .on("click", function () {
              input.trigger("focus");
              if (wasOpen) { return; }// Close if already visible
              input.autocomplete("search", "");// Pass empty string as value to search for, displaying all results
          });
},

_source: function (request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response(this.element.children("option").map(function () {
        var text = $(this).text();
        if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: this };
    }));
},

_removeIfInvalid: function (event, ui) {
    if (ui.item) { return null; }// Selected an item, nothing to do

    // Search for a match (case-insensitive)
    var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; var Koi = null;
    this.element.children("option").each(function () { if ($(this).text().toLowerCase() === valueLowerCase) { this.selected = valid = true; Koi = this; return false; } });

    if (valid) { return Koi; } // Found a match, nothing to do
    // Remove invalid value
    this.input.val("").attr("title", "Aucun enregistrement correspondant à " + value).tooltip("open");
    this.element.val("");
    this._delay(function () { this.input.tooltip("close").attr("title", ""); }, 2500);
    this.input.autocomplete("instance").term = "";
    return Koi;
},
_destroy: function () { this.wrapper.remove(); this.element.show(); }
});

TO create my custom autocomplete I use thsi function

 function CustomComboAuto($r, q) {
    var s = (q == null ? "select.TFOAutoCombo" : q); $r.find(s).TFOAutoCombo({
        select: function (event, ui) {
            alert("select:" + ui.item.value);
        },
        change: function (event, ui) {
            alert("Change" + ui.item.value);
        }
    });
}

And my CSS:

.TFOcustom-combobox {
position: relative;
display: inline-block;
vertical-align:middle;
padding: 0 10px 0 0;
border:none !important;
background:none !important;
}

.TFOcustom-combobox-Fleche {
position:absolute;
right:0.5em;
top:50%;
margin-top:-8px;
z-index:100;
}

.TFOcustom-combobox-Input{
width:95%;
font-size:small !important;
padding:0.7em 0 0.7em 1em;
line-height:1.4;
}

And I've 2 Problems/ The first is when I select with mouse it's fired select event (good) When I use up/down and press entrer to select an item, it's fired change event and after select event. And I just need change not the select) The second problem and I want fire autocompletechange event when I write directly in my autocomplete and press enter key. I've capture the event enterkeypress but I can't fired the research properly.

If someone can help me. I work on that since 3 days, passed lot of problem but now I've no more idea to solve this 2 points.

Answer 1

Finnally I solved the first big part of problems.

$.widget("custom.TFOAutoCombo", {

_create: function () {
    var nam = this.element.attr("id").split("lstFiltreAuto");
    this.element.hide();
    this.wrapper = $("<span>", { "class": "ui-state-default TFOcustom-combobox SizCol" + nam[1] }).appendTo($('#acc-container' + nam[1]));
    this._createAutocomplete(nam[1]);
    this._createShowAllButton(nam[1]);
},

_createAutocomplete: function (nam) {
    var selected = this.element.children(":selected"),
                  value = selected.val() ? selected.text() : "";
    var selectedName = '';
    this.input = $('<input class="ui-state-default TFOcustom-combobox-Input ui-corner-all" placeholder="TOUS">').appendTo(this.wrapper).val(value)
          .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source"), appendTo: '#acc-container' + nam })
          .keypress(function (e, ui) {
              if (e.which == 13) {
                  e.preventDefault(); $(this).autocomplete("close"); var inputs = $(this).closest('body').find(':focusable'); inputs.eq(inputs.index(this) + 1).focus();
              }
          })
          .tooltip({ classes: { "ui-tooltip": "ui-state-highlight" } });
    this._on(this.input, {
        autocompleteselect: function (event, ui) { if (selectedName === ui.item.value) { return; } else { selectedName = ui.item.value; ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); } },
        autocompletechange: function (event, ui) { if (selectedName === this.input.val()) { return; } else { var ret = this._removeIfInvalid(event, ui); if (ret != null) { selectedName = this.input.val(); this._trigger("select", event, { item: ret }); } } }
    });
},
_createShowAllButton: function (nam) {
    var input = this.input, wasOpen = false;
    $('<span class="ui-icon ui-icon-triangle-1-s TFOcustom-combobox-Fleche">').appendTo(this.wrapper)
          .on("mousedown", function () { wasOpen = input.autocomplete("widget").is(":visible"); })
          .on("click", function () {
              input.trigger("focus");
              if (wasOpen) { return; }// Close if already visible
              input.autocomplete("search", "");// Pass empty string as value to search for, displaying all results
          });
},

_source: function (request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response(this.element.children("option").map(function () {
        var text = $(this).text();
        if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: this };
    }));
},

_removeIfInvalid: function (event, ui) {
    if (ui.item) { return null; }// Selected an item, nothing to do

    // Search for a match (case-insensitive)
    var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; var Koi = null;
    this.element.children("option").each(function () { if ($(this).text().toLowerCase() === valueLowerCase) { this.selected = valid = true; Koi = this; return false; } });

    if (valid) { return Koi; } // Found a match, nothing to do
    // Remove invalid value
    this.input.val("").attr("title", "Aucun enregistrement correspondant à " + value).tooltip("open");
    this.element.val("");
    this._delay(function () { this.input.tooltip("close").attr("title", ""); }, 2500);
    this.input.autocomplete("instance").term = "";
    return Koi;
},
_destroy: function () { this.wrapper.remove(); this.element.show(); }
});

The solution is simple, when I capture Enter KeyPress I close autocomplete and put focus otherthere :-) to trigger autocompletechange event.

Now JUST stay the problem of double fired event when I use up/down and selecting by EnterKeyPress on list

UPDATE I change the _createAutocomplete with a variable to memorize the last value... Too simple that I can see it. All Resolved. Enjoy a good autocomplete combobox seems selectmenu