选项列表在 Safari、Mozila、Chrome 中无法正常工作

Question

我在开发 web 应用程序的前端时遇到了一些问题。有几个问题：

1. 如果太长我需要剪切文本，所以我这样做了

   .suggestion-box-text { white-space: nowrap;溢出：隐藏；
   文本溢出：省略号； }

但是我不能在 Chrome 中使用滚动，只能使用键。 2.无论我使用什么Safari都会记住列表中最后一个选择的项目，下次使用选择时它会从它开始，而不是从第一个元素开始。

1. 而且在 FireFox 中也没有什么能正常工作，当做同样的事情来剪切太长的文本时，滚动仍然有效，但是当我用键移动时，列表不会滚动。

   有什么已知的方法可以解决这个问题吗？或者只是尝试并祝你好运，直到找到有效的组合？

HTML 文件

<div class="navbar-container container-fluid">
        <div class="" id="site-navbar-search">
            <form id="originalSearch" role="search" ng-submit="query()">
                <div class="form-group" style="margin: 15px 0px 0px 0px">
                    <div class="input-search">
                        <speech class=""></speech>

                        <input id="questionForInput" type="text"
                          ng-change="ask.getsuggestions()" autocomplete="off"
                          ng-model="ask.term" class="form-control bg-dark"
                          placeholder="Ask ..." ng-keydown="key($event)"/>

                        <select id="suggestionSelection" class="suggestion-box
                          list-group2 bg-dark" ng-keydown="key2($event)"
                          multiple="multiple"ng-model="ask.term">

                          <option class="list-group-item2 suggestion-box-text bg-dark"
                            ng-repeat="command in ask.suggestions">
                              {{command.statement}}
                          </option>
                        </select>
                        <button type="submit" style="visibility: hidden; display:none"></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

CSS 文件

.suggestion-box {
  overflow: auto;
  overflow: -moz-scrollbars-auto;
  position: absolute;
  z-index: 1;
  width:100%;
  visibility: hidden;
  border-radius: 0px 0px 18px 18px;
  outline: none;
}

.suggestion-box-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
  .suggestion-box {
      padding-left: 15px;
  }
}


body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

::-webkit-scrollbar { width: 0px; height: 0px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 0px; background-color: #666; border-radius: 0px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

也是JS文件的一部分

$scope.key = function($event){
          if ($event.keyCode == 40) {
            $('#suggestionSelection').focus();
            $('#suggestionSelection').focus();
            //$("select#suggestionSelection").prop('selectedIndex', -1);
            //$("#suggestionSelection")[0].selectedIndex = -1;
          }
          else if($event.keyCode == 27) {
            $('#suggestionSelection').css('visibility', 'hidden');
            $('#questionForInput').css('border-radius', '200px 200px 200px 200px');
          }
        }

        $scope.key2 = function($event){
          console.log($event.keyCode);
          if ($event.keyCode == 38) {
            if($('#suggestionSelection')[0].selectedIndex == -1 || $('#suggestionSelection')[0].selectedIndex == 0) {
              $('#questionForInput').focus();
              $('#suggestionSelection').css('visibility', 'hidden');
              $('#questionForInput').css('border-radius', '200px 200px 200px 200px');
            }
          }
          else if($event.keyCode == 27 || $event.keyCode == 13) {
            $('#questionForInput').focus();
            $('#suggestionSelection').css('visibility', 'hidden');
            $('#questionForInput').css('border-radius', '200px 200px 200px 200px');


          }
        }

Answer 1

最好使用 ngOptions 指令（它比 <option> 上的 ng-repeat 快得多 https://docs.angularjs.org/api/ng/directive/ngOptions