更改jQuery自动完成框位置

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>

​

我读过的关于自动完成位置的文章(这些答案并没有帮助)：

• Change jQuery UI Autocomplete Position - Pop up, instead of down
• How to position the jQuery autocomplete widget
• JQuery UI AutoComplete Position
• jQuery autocomplete : move list position?

编辑1 --我只是尝试删除的很大一部分，其中一种方法实际上起作用了。我不知道这句话是什么意思，也许我不能删除，但我只是想通知你。

Answer 1

我自己想出了答案。主要的问题是，我有一个名为v-container的容器，它的高度被设置为100%，所以这个元素甚至不在用户的视图中。只要做一些改动，一切都会很好:)

我增加了这一行：

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

还有..。

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

所以元素在.input容器中，它在v-container中，所以现在一切都是干净的。