更改 jQuery 自动完成框位置答案

【问题标题】：Change the jQuery autocomplete box position更改 jQuery 自动完成框位置
【发布时间】：2018-06-21 10:45:11
【问题描述】：

近半天来，我一直在寻找一种可行的解决方案，即使其中一些在窗口尺寸变小或变大时乍一看似乎可以工作，但它看起来一团糟。我会告诉你我的意思，所以这个问题不会只是另一个重复。

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

未输入任何内容：

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

这里的问题是自动完成框.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，其中一种方法确实有效。我不确定那是哪一行，也许我无法删除它，但我只是想通知你。

【问题讨论】：

为什么不把表格放在输入上方的 HTML 标记中？
或者尝试使用!important来强制你的位置。
@LouysPatriceBessette 我可以，但我希望能够将它移动到页面上的任何位置。
@TricksfortheWeb 我已经试过了，看看我看到的答案。如果用户调整页面大小，则不起作用:(

标签： javascript jquery html css jquery-ui-autocomplete

【解决方案1】：

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

我已经添加了这一行：

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

还有……

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

所以元素在.input容器中，在v-container里面，所以现在一切都干净了。

【讨论】：