0
フィルタのようなオートコンプリート/コンボボックスを使いたいです。 jQueryUIのコードをカスタマイズして、selectMenuのような同じフォームを提供します。そして私は、Enterキーを押しながらイベントを選択して変更し、triger変更イベントを使用します。カスタムjquery-uiのいくつかの問題オートコンプリートコンボボックス
ここに私のコード：
$.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(); }
});
私のカスタムオートコンプリートを作成するために、私はthsi機能
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);
}
});
}
そして、私の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;
}
を私は2つの問題/ をしました最初はマウスで選択すると選択イベントが発生します（良い） いつ私は上/下を使用してentrerを押してアイテムを選択し、それは発動チェンジイベントであり、選択イベント後である。そして、私はちょうど選択を変更する必要があります） 2番目の問題と私は私のオートコンプリートに直接書き込み、Enterキーを押すと、オートコンプリートイベントを発生させます。私はイベントenterkeypressをキャプチャしたが、私は適切に研究を解雇することはできません。
誰かが私を助けることができる場合。私は3日以来問題に取り組んできましたが、今私はこの2点を解決する考えはもうありません。