我使用jquery自动完成高度
这是使用它的ts代码
export module Autocomplete {
export function load_autocomplete_fields(): void {
$(".airport_field").each(function() {
$(this)
.autocomplete(
{
delay: 10,
minLength: 0,
source(request, response) {
$(this.element[0]).attr("data-req-term", request.term);
$.ajax({
url: $(this.element[0]).attr("data-source"),
dataType: "json",
data: {
term: request.term
},
success(data) {
const results = [];
$.map(data.cities, function(value, key) {
results.push(value);
return $.map(value.airports, (value2, key2) =>
results.push(value2)
);
});
$.map(data.airports, (value, key) => results.push(value));
return response(results);
},
error() {
return response([]);
}
});
return null;
},
focus(event, ui) {
return false;
},
select(event, ui) {
const qel = $(event.currentTarget);
qel.val(ui.item.fullname);
$(qel.attr("data-id-element")).val(ui.item.id);
return false;
}
}
)
.data("ui-autocomplete")._renderItem = function(ul, item) {
return create_autocomplete_item($(this.element[0]), ul, item);
};
$(".airport_field").on("autocompleteselect", function() {
if ($(this)[0].id.indexOf("origin") !== -1) {
let id = $(this)[0].id.split("_")[2];
return $(`#search_legs_${id}_destination_text`).focus();
}
});
$(".airport_field").focus(function() {
if (!$(this).val()) {
return $(this)
.val(" ")
.keydown();
}
});
});
}
const create_span_from_match = function(str, regex) {
let r;
if (str != null && regex != null && (r = str.match(regex))) {
const tmp = r.index + r[0].length;
let result = "";
if (r.index > 0) {
result += str.substring(0, r.index);
}
result += `<span style='color:red;'>${r[0]}</span>`;
result += str.substring(tmp, str.length);
return result;
} else {
return str;
}
};
const create_autocomplete_item = function(owner, ul, item) {
const term = owner.attr("data-req-term").trim();
const regex = new RegExp(term, "i");
const type = item.type >= 10 ? "cityairport" : item.type === 1 ? "city" : "airport";
const li = $(`<li class='searchfield ${type}'>`);
const country_text = item.type > 1 ? `${item.city}, ${item.country}` : `${item.country}`;
const name_result = create_span_from_match(item.name, regex);
const city_result = create_span_from_match(country_text, regex);
const iata_result = create_span_from_match(item.iata, regex);
li.append(`<div class='autocomplete-container'><div class='container'><span class='name'>${name_result}</span><span class='country'>${city_result}</span></div><div class='iata'>${iata_result}</div></div>`);
li.appendTo(ul);
return li;
};
}
当我点击自动填充字段并获得所有结果时,我有了这个
结果高度都可以。
但是当我试图获得结果时,例如CPH,我得到的结果窗口大于结果数。
以下是它的外观
我都有这些课程
.ui-menu ui-widget ui-widget-content ui-autocomplete ui-front
我试着写这样的风格
ul .ui-menu .ui-widget .ui-widget-content .ui-autocomplete .ui-front{
height:auto;
}
但它并没有帮助我。
但我的问题在哪里?