自动完成窗口未设置正确的高度

时间:2018-04-16 08:09:45

标签: javascript jquery css typescript autocomplete

我使用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;
  };
}

当我点击自动填充字段并获得所有结果时,我有了这个

Full results

结果高度都可以。

但是当我试图获得结果时,例如CPH,我得到的结果窗口大于结果数。

以下是它的外观

enter image description here

我都有这些课程

  

.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;
} 

但它并没有帮助我。

但我的问题在哪里?

0 个答案:

没有答案