Question

我有一个搜索输入框，可在用户输入时给出建议。但是，包含建议搜索的下拉列表没有显示。

我尝试过的事情：

将z-index: 100 !important;添加到主要的CSS。
用https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js替换jquery-2.1.4.js并在HTML内调用搜索功能。准备好文档后，将调用搜索功能。
检查是否正在加载包含可能结果的JSON文件。

到目前为止，还没有。 2是唯一有效的方法。但是，我不想更改我的JQuery版本。

下面是代码：

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Auto complete Dropdown</title>

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">
  <link rel="stylesheet" href="css/activities.css">

  <script src="lib/jquery-2.1.4.js" defer></script>

  <script src="lib/jquery-ui.js" defer></script>

</head>

<body>

  <div id="searchBar" tabindex="-1">
      <input type="text" name="search" id="search" class="ui-autocomplete" placeholder="Search for Blocks" tabindex="-1">
      <ul class="ui-menu" id="searchResults"></ul>
  </div>

</body>

</html>

JavaScript：

doSearch = function () {
   var $j = jQuery.noConflict();

       $j('#search').autocomplete({
            source: searchSuggestions
       });

    $j('#search').autocomplete('widget').addClass('scrollSearch');
};

showSearchWidget = function () {

        if (searchWidget.style.visibility === 'visible') {
            hideSearchWidget();
        } else {
            var obj = docByClass('ui-menu');
            if (obj.length > 0) {
                obj[0].style.visibility = 'visible';
            }

            searchWidget.value = null;
            docById('searchResults').style.visibility = 'visible';
            searchWidget.style.visibility = 'visible';
            searchWidget.style.left = palettes.getSearchPos()[0] * turtleBlocksScale + 'px';
            searchWidget.style.top = palettes.getSearchPos()[1] * turtleBlocksScale + 'px';

            searchBlockPosition = [100, 100];

            // Give the browser time to update before selecting
            // focus.
            setTimeout(function () {
                console.debug('DO SEARCH!!!');
                searchWidget.focus();
                doSearch();
            }, 500);
        }
    };

CSS：

#search[type=text] {
    width: 400px;
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    background-repeat: no-repeat;
    padding: 6px 10px 6px 20px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    font-size: 24px;
    color: black;
}

#search:focus {
    border: 2px solid #87CEFA;
}

.ui-menu {
  position: relative;
  background-color: rgba(255,255,255,1.0);
  max-width: 250px;
  font-size: 24px;
}

jQuery UI自动完成下拉菜单不显示

0 个答案: