如何創建顯示過濾器時自行擴展的搜索框？

我想創建一個向下延伸本身就是一個搜索框，當用戶輸入的東西如何創建顯示過濾器時自行擴展的搜索框？

下面是一個例子

現在我成立了HTML，使得它顯示了所有可能的值在在搜索框中

Search: <input ng-model="query"> 
    <ul class="my_possible_values"> 
    <li ng-repeat="possible_value in my_possible_values | filter:query"> 
     {{possible_value}} 
    </li> 
    </ul>

底部然而所列出的元素下推搜索框下方其他div元素，而不是覆蓋它。

來源

2015-09-14 Kevin

爲什麼不使用'type-a-head'或'autocomplete'指令？例如。因爲你正在使用twitter-bootstrap和angularjs嘗試angular-ui-bootstrap typeahead：https://angular-ui.github.io/bootstrap/#/typeahead –

你會喜歡這個：http://tympanus.net/Development/ MorphingSearch – Dario

你應該在你的.my_possible_values課上加上position: absolute的風格 - 這是我在過去製作/設計搜索框下拉列表的方式。這將使下拉內容脫離DOM的正常流程，從而防止它壓低頁面上的其他div。

你可以閱讀更多關於CSS位置本頁面:) http://www.w3schools.com/cssref/pr_class_position.asp

此外，你可能會想添加overflow-y: scroll和max-height風格的.my_possible_values菜單上還有這樣它不會溢出底部如果您有很多下拉選項，則該頁面會顯示在頁面上。

我會說這些是創建一個好的下拉列表最重要的CSS規則。祝你好運！

來源

2015-09-14 05:10:15 daniman

如何創建顯示過濾器時自行擴展的搜索框？

回答

相關問題