Question

我一直在寻找一种工作解决方案将近半天，即使其中一些看起来像窗口尺寸较小或较大时的第一眼看起来工作，它看起来很混乱。我会告诉你我的意思所以这个问题不会只是另一个重复。

目前，我所拥有的是当用户在输入框中输入一个键时，黄色表出现并显示文本输入的值。

没有输入任何内容：

用户在输入框中输入一个字符：

此处的问题是自动填充框.ui-autocomplete显示在输入框#search的正下方。它应显示在table元素下方，以便自动完成框不会隐藏table。这是图像应该是什么样子：

请参阅开发工具CSS编辑器中的top属性？我已手动更改它，更改此属性不提供任何内容。我在StackOverflow中尝试了很多答案，但没有任何效果。这是使用top属性转换器的答案：https://stackoverflow.com/a/4728786/8889739。

当用户调整窗口大小时，此方法不起作用。我尝试过使用px和%。也许使用vw可以改变一些东西，但我不确定。

var tags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

$("#search").autocomplete({

  source: function(request, response) {
    var results = $.ui.autocomplete.filter(tags, request.term);
    response(results.slice(0, 5));
  }
});



// ONLY FOR THE #INSTANT-SEARCH FUNCIONALITY >> IGNORE THIS PART
var changeText2 = function(e) {
  var request = $("input").val() + String.fromCharCode(e.which);
  $("#instant-search").text(request);

  if (
    $("#instant-search")
    .text()
    .trim().length
  ) {
    $("table").css("display", "table");
  } else {
    $("table").hide();
  }
};

var changeText1 = function(e) {
  $("tr:nth-child(1)").css({
    background: "#ffc800",
    color: "#fff"
  });
  if (
    /[-a-z0-90áãâäàéêëèíîïìóõôöòúûüùçñ!@#$%^&*()_+|~=`{}\[\]:";'<>?,.\s\/]+/gi.test(
      String.fromCharCode(e.which)
    )
  ) {
    $("input").on("keypress", changeText2);
  }

  var getInputSelection = function(input) {
    var start = 0,
      end = 0;
    input.focus();
    if (
      typeof input.selectionStart == "number" &&
      typeof input.selectionEnd == "number"
    ) {
      start = input.selectionStart;
      end = input.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
      var range = document.selection.createRange();
      if (range) {
        var inputRange = input.createTextRange();
        var workingRange = inputRange.duplicate();
        var bookmark = range.getBookmark();
        inputRange.moveToBookmark(bookmark);
        workingRange.setEndPoint("EndToEnd", inputRange);
        end = workingRange.text.length;
        workingRange.setEndPoint("EndToStart", inputRange);
        start = workingRange.text.length;
      }
    }
    return {
      start: start,
      end: end,
      length: end - start
    };
  };

  switch (e.key) {
    case "Backspace":
    case "Delete":
      e = e || window.event;
      var keyCode = e.keyCode;
      var deleteKey = keyCode == 46;
      var sel, deletedText, val;
      val = this.value;
      sel = getInputSelection(this);
      if (sel.length) {
        // 0 kai paprastai trini po viena o 1 ar daugiau kai select su pele trini
        $("#instant-search").text(
          val.substr(0, sel.start) + val.substr(sel.end)
        );
      } else {
        $("#instant-search").text(
          val.substr(0, deleteKey ? sel.start : sel.start - 1) +
          val.substr(deleteKey ? sel.end + 1 : sel.end)
        );
      }
      break;
  }

  if (!$("#instant-search")
    .text()
    .trim().length
  ) {
    $("table").hide();
  }

  $("input").on("input", function(e) {
    $("#instant-search").text($("#search").val());

    if (
      $("#instant-search")
      .text()
      .trim().length
    ) {
      $("table").css("display", "table;");
    } else {
      $("table").hide();
    }
  });
};

$("input").on("keydown", changeText1);

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.v-container {
  display: table;
  height: 100%;
  width: 100%;
}

.v-content {
  display: table-cell;
  vertical-align: middle;
}

.text-center {
  text-align: center;
}

h1 {
  color: #fff;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

.input input#search {
  width: calc(100% - 30px);
  height: 50px;
  border: none;
  font-size: 10pt;
  float: left;
  color: #4f5b66;
  padding: 0 15px;
  outline: none;
}

.input button.icon {
  border: none;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  background: #fff;
  border-left: 1px solid #ddd;
  margin-left: -50px;
  outline: none;
  cursor: pointer;
  display: none;
  -webkit-transition: background .5s;
  transition: background .5s;
}

.input button.icon:hover {
  background: #eee;
}

.ui-autocomplete {
  list-style: none;
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
  padding: 0;
  margin: 0;
  width: 100% !important;
}

.ui-helper-hidden-accessible {
  display: none;
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  display: none;
  table-layout: fixed;
}

table tr {
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

table td,
.ui-menu-item-wrapper {
  padding: 10px;
}

td:nth-child(2) {
  width: 85%;
  text-align: left;
}

tr:hover,
.ui-menu-item:hover,
.ui-state-active {
  background: #ff3c41;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="v-container">
  <div class="v-content text-center">
    <div class="input">
      <input type="text" id="search" placeholder="Search...">
      <button class="icon"><i class="fa fa-search"></i></button>

      <table>
        <tr>
          <td class="fa fa-search">
            <td id="instant-search" class="three-dots"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

我读过的关于自动完成位置的主题（这些答案没有帮助）：

编辑1 我只是试图删除大部分CSS，其中一个方法实际工作。我不确定那条线是什么，也许我不能删除它，但我只是想通知你。

Answer 1

我自己想出了答案。主要问题是我有一个名为v-container的容器，其高度设置为100%，因此该元素甚至不在用户的视图中。通过一些更改，一切正常：）

我添加了这一行：

.ui-autocomplete {
  top: auto !important;
}

和...

$("#search").autocomplete({
  appendTo: '.input'
});

因此该元素位于.input容器中，位于v-container内，所以现在一切都很干净。

更改jQuery自动完成框位置

1 个答案: