在輸入文字中寫入時保持關注下拉列表

我是AngularJS和Bootstrap中的一名新成員，希望得到一些幫助。在輸入文字中寫入時保持關注下拉列表

我想創建一個動態的下拉列表，它通過輸入文本進行過濾。這裏是我的代碼：

<input id="SelectedCountry" type="text" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true" ng-model="Pass" autocomplete="off" /> 
<ul class="dropdown-menu"> 
    <li data-ng-repeat="r in countrycodes | MyFilter *my filter in the app.filter. works fine*"><a href="#" data-ng-click="selectedcountry.value=r.value">{{r.name}}</a></li> 
</ul>

我想那每次的向下arrowkey重點用戶點擊將在下拉列表（？它不會自動發生，爲什麼），所以我寫了這個代碼：

$(document).on('shown.bs.dropdown', function (event) { 
    var dropdown = $(event.target); 
    $("input").keydown(function (e) { 
     if ((e.which && e.which == 40) || (e.keyCode && e.keyCode == 40)) { 
      // Set aria-expanded to true 
      dropdown.find('.dropdown-menu').attr('aria-expanded', true); 

      // Set focus on the first link in the dropdown 
      dropdown.find('.dropdown-menu li:first-child a').focus(); 

      return false; 
     } else { 
      return true; 
     } 
    }); 
});

我的問題是，當用戶按向下的箭頭鍵焦點不再輸入文本，所以他不能繼續寫。

我該如何製作一個動態下拉列表，用戶可以在焦點位於菜單上的同時繼續書寫？我已經嘗試過使用jquery過濾器，但它沒有奏效，因爲我必須使用AngularJs，因此我可以在用戶選擇他的選項時觸發data-ng-click，此外，我還可以使用數據ng -repeat，所以我不能在html中使用默認的「選擇」和「選項」標籤。無處不在，我搜索的解決方案說，不能對同一時間聚焦的元素。也許還有另一種選擇？因爲這種情況下有很多網站？

謝謝你的幫助

來源

2016-07-04 Liad Aram

是的，你說得對。它不能同時聚焦2個元素。

來源

2016-07-04 15:35:03 Qianyue

它不會自動關注下拉列表，因爲它不應該是。當用戶在普通的輸入字段中按下或關閉（沒有事件監聽器和特殊的東西）時，根據被按下的內容，光標應該只移動到最左邊或最右邊。

此外，您無法同時關注它們。只有一個元素可以聚焦。你可以做的是保持一個變量，說明哪個下拉列表元素「聚焦」，併爲用戶按下回車鍵來設置事件監聽器，該腳本將執行與該列表元素相關的所有內容。按下向上或向下時，該變量將會改變。另外，如果按下向上/向下，應該使用event.preventDefault（）來停止光標向左/向右移動。希望這可以幫助。

UPDATE

還有一件事。爲了模擬點擊所需的下拉列表項目，您可以使用jQuery's trigger function。

更新2

我做了一個示例代碼，因爲我不知道怎麼回事，以顯示我的意思。另外，我還沒有使用jQuery - 一切都是香草JS。因此我也沒有使用觸發器功能。隨意玩它或判斷它（這就是我所做的）：

<html> 
    <head> 
     <style> 
      #content { 
       width: 500px; 
       margin-top: 30px; 
       margin: 0 auto; 
      } 

      #search-list { 

      } 

      #search-list li { 
       display: block; 
       width: 200px; 
       height: 40px; 
       line-height: 40px; 
       padding: 5px; 
       border: 1px solid #666; 
      } 


      #search-list li.focused { 
       background: #aaa; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <input id="search-input" type="text" value="" placeholder="Type text here" /> 
      <ul id="search-list"> 
       <li>Meow</li> 
       <li>Roar</li> 
       <li>Mewore</li> 
       <li>Foo</li> 
       <li>Bar</li> 
       <li>Bartender</li> 
      </ul> 
      <div id="log"> 
      </div> 
     </div> 

     <script type="text/javascript"> 
      var items = document.getElementById('search-list').getElementsByTagName('li'); 

      document.getElementById('search-input').addEventListener("keydown", keyDownHandler); 

      for(var i=0; i<items.length; i++) { 
       items[i].addEventListener("mouseover", mouseOverHandler); 
       items[i].addEventListener("mouseout", mouseOutHandler); 
       items[i].addEventListener("click", clickHandler); 
      } 

      function getElementIndex(elem) { 
       var children = event.target.parentNode.childNodes; 
       var idx=-1; 
       for(var i=0; i<children.length; i++) { 
        if(children[i].nodeType == 1) { 
         idx++; 
         if(children[i] == elem) return idx; 
        } 
       } 
      } 

      function mouseOverHandler(event) { 
       var idx = getElementIndex(event.target); 

       if(currentItem != -1) items[currentItem].className = ""; 

       event.target.className = "focused"; 
       currentItem = idx; 
      } 

      function mouseOutHandler(event) { 
       var idx = getElementIndex(event.target); 
       event.target.className = ""; 
       if(currentItem == idx) { 
        currentItem = -1; 
       } 
      } 

      function clickHandler(event) { 
       document.getElementById('log').innerHTML += '<p>' + event.target.innerText + '</p>'; 
      } 

      var currentItem = -1; 

      function keyDownHandler(event) { 
       var keyPressed = event.which || event.keyCode; 
       if(keyPressed == 38) { 
        //up 
        event.preventDefault(); 
        if(currentItem >= 0) { 
         items[currentItem].className = ""; 
        } 
        currentItem = (currentItem == -1) ? (items.length-1) : (currentItem-1); 
        if(currentItem >= 0) { 
         items[currentItem].className = "focused"; 
        } 
       } else if(keyPressed == 40) { 
        //down 
        event.preventDefault(); 
        if(currentItem >= 0) { 
         items[currentItem].className = ""; 
        } 
        currentItem = (currentItem == items.length - 1) ? -1 : (currentItem+1); 
        if(currentItem >= 0) { 
         items[currentItem].className = "focused"; 
        } 
       } else if(keyPressed == 13) { 
        //enter 
        if(currentItem == -1) document.getElementById('log').innerHTML += '<p>' + event.target.value + '</p>'; 
        else document.getElementById('log').innerHTML += '<p>' + items[currentItem].innerText + '</p>'; 
       } 
      } 
     </script> 
    </body> 
</html>

來源

2016-07-04 15:38:08

首先，謝謝你的答案。第二，你說「你可以做的是保持一個變量，說哪個下拉列表元素是」重點「」。我怎麼知道當時下拉列表元素的重點？我嘗試了幾件事，沒有成功。 –

另一件事，如果下拉列表和輸入字段不能同時關注，那麼如何有很多動態搜索框（最簡單的例子是Google搜索框或Facebook），您可以在不斷輸入內容的同時關注選項輸入文字？ –

感謝您的提問。我會更新我的答案。 –

在輸入文字中寫入時保持關注下拉列表

回答

相關問題