0
필터처럼 자동 완성/콤보 상자를 사용하고 싶습니다. jQueryUI에서 코드를 사용자 정의하여 selectMenu와 같은 양식을 제공한다. 그리고 Enter 키를 누를 때 select 및 change 이벤트와 triger change 이벤트를 사용하고 싶습니다. 여기커스텀 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;
}
그리고 나는이 문제를했습니다/ 첫 번째는 마우스로 선택하면 선택 이벤트 발생 (양호) 위/아래를 사용하고 entrer를 눌러 항목을 선택하면 변경 이벤트가 발생하고 선택 이벤트가 발생합니다. 그리고 난 그냥 선택을 변경해야합니다) 두 번째 문제는 내가 자동 완성에 직접 작성하고 Enter 키를 누르면 화재 autocompletechange 이벤트를 원한다. 나는 enterkeypress 이벤트를 캡처했지만 제대로 연구를 해고 할 수는 없다.
누군가 나를 도울 수 있다면. 나는 3 일이 지난 지금부터 많은 문제를 겪었으나 이제는이 2 점을 해결할 생각이 없습니다.