vue實戰開發006:製作input輸入及下拉選擇搜尋框

今天做的是實現點擊input框時彈出下拉選擇菜單,點擊下拉列表中要搜尋將數據賦值給input框,然後再加個清楚按鈕,當input框沒有數據的時候隱藏,當有數據輸入的時候就顯示改功能,下面是功能演示。

工具/原料

VUE

方法/步驟

首先我們先來設計input框加搜尋按鈕,這裡我們直接用字體圖標來實現, 我引用了bootstrap和element-ui的字體圖標,所以直接在i標籤中加入對應的圖標樣式即可。

接著我們為這幾個元素設置樣式,這裡我們把input自帶的邊框給清除了,包括獲取焦點之後的邊框也給清除了,為了避免刪除按鈕因隱藏再顯示而導致input框有長度變化,所以這裡我們就用了個相對/絕對位置將刪除按鈕移到了input框中,這樣就不會出現一下長一下短的問題了,這樣我們就得到了一個帶刪除按鈕的搜尋框。

當然還有一種方法就是我們在刪除按鈕外再加個div,然後給個寬高,這樣再隱藏就不會收縮了,可以給刪除按鈕占個位,同樣可以達到效果的。

實現數據清除功能,這個只要在input中綁定了v-mode數據,在刪除按鈕上綁定一個click點擊事件,當點擊按鈕時就將input框中的數據清空,這時我們只要點擊刪除按鈕就可以清除input中的數據了。

但是沒數據的時候刪除按鈕放那裡是不是很難看,我要實現有數據時才顯示,沒數據時就隱藏的效果,這時我們就要對searchpro進行判斷了,當沒有數據時就隱藏,有數據時就顯示,這裡我們用到v-if的功能。

<i class="el-icon-close clear_x" v-if="searchpro == '' ? false : true" @click="cleardata"></i>

這時我們已經實現了簡單的input刪除數據功能,接著我還想要有提示,當input獲取焦點時我就彈出下拉框,顯示最近的搜尋數據,提高用戶體驗,所以這裡我們在添加一個列表選項。

因為我們要在input框下顯示,所以這裡我用到的相對/絕對定位來放置該元素,這個有個特點因為引用了bootstrap樣式,所以底部會多出10px的外邊框樣式,這樣需要手動清除下,隱藏顯示我們直接用css樣式搞定,將列表默認隱藏,當上層元素獲取焦點的時候將該元素的樣式顯示出來(重點是將獲取焦點放置上層元素)。

而li標籤我們只要將其點擊時的樣式更改下,這樣當我們選中某個樣式時就可以與其他樣式進行區分了,這裡我們用黃色只是為了更好的區分元素之間的關係,當我們把樣式調好之後在改成自己需要的樣式即可。

最後就是賦值了,當我選中列表中的元素時我要把這個數據填充到input框中去,這時我們就要給列表添加點擊事件@click="select(pro),通過select方法,最後就是搜尋按鈕的實現了,這樣要跟後台交互獲取數據(當然也可以在點擊列表中的數據時直接提交搜尋,這樣會更簡單便捷,就看個人需求了)。

相關文章

  1. 網站製作中使用javascript下拉菜單

    網站中,我們總能看到那些下拉菜單,關於下拉菜單,是否適合每個網站使用?是否利於優化? 工具/原料 html.javascript.DW軟體 步驟/方法 如果你必須使用Java script的下拉菜單. ...
  2. Excel中如何製作下拉選擇列表

    需要在excel中製作一個省份選擇列表,以實現統一輸入省份格式?這就用到了下拉選擇列表. 工具/原料 excel軟體 方法/步驟 選擇"文件-選項-自定義功能區"在主選項卡選中&q ...
  3. Excel怎麼製作單元格的下拉菜單?

    我們在使用Excel時常常需要輸入很多相同的內容,如果一個一個手動輸入的話會加大我們的工作量,所以這時我們就可以製作單元格的下拉菜單,使我們的輸入更加簡便,下面小編就來說一下要怎麼設置,希望能幫得到大 ...
  4. excel2017如何輸入下拉選擇框

    輸入下拉框的目的是為了規範輸入者的輸入信息,在表格設計者限定的輸入信息中進行選擇,這樣為以後的統計帶來很多便利 工具/原料 excel2017 方法/步驟 如果要對表格中的一個單元格進行限制,就選中單 ...
  5. 利用Excel製作簡單的二級下拉菜單

    有時候我們在excel輸入數據時,單元格需要重複輸入,可是數據之間又有很強的隸屬關係,例如我國的行政區域劃分,在輸入這樣的一些數據時,我們可以製作一個簡單的二級下拉菜單,正所謂"磨刀不誤砍柴 ...
  6. 智能報表軟體FineReport中如何製作下拉複選框

    下面就通過智能報表軟體FineReport來介紹一下如何製作. 工具/原料 智能報表軟體FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  7. 智能報表系統FineReport中如何製作下拉複選框

    下面就通過智能報表系統FineReport來介紹一下如何製作. 工具/原料 智能報表系統FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  8. excel怎樣限制單元格添加下拉選擇輸入

    在輸入數據的時候,為了限制輸入的內容的輸入,我們時常那個需要給單元格添加一個下拉菜單,讓用戶選擇其中的內容輸入,這樣我們不必按鍵盤手動輸入,用滑鼠選擇輸入就看了一了這樣避免多人輸入不統一 的內容或者有 ...
  9. 可以輸入的下拉框實現方法

    可以輸入的下拉框的實現方法其實就是select選擇框和input輸入框的組合,在select選擇框中加入onchange方法,在js中將select選中的值賦值給input輸入框,下面有詳細代碼以及視 ...
  10. 如何製作Excel的二級下拉菜單,Excel複選框製作

    二級下拉菜單是我們經常會用到的一個技能,可以避免一些重複輸入數據,可以通過簡單的二級下拉選擇解決這些問題. 方法/步驟 首先我們要定義一個名稱,如果不知道如何定義名稱,可以參照下面的經驗去操作. 然後 ...
  11. bi報表工具FineReport中如何製作下拉複選框

    下面就通過bi報表工具FineReport來介紹一下如何製作. 工具/原料 bi報表工具FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  12. excel怎樣製作二級關聯性聯動下拉菜單

    在網站我們經常看到這種聯動性二.三級下拉菜單,有的甚至更多,其實我們也可以用excel做出這個關聯性的二級下拉菜單,那麼怎樣操作呢 工具/原料 excel軟體 方法/步驟 為了演示這個做少量數據表格, ...
  13. excel如何製作組合框動態下拉選擇圖表

    使用組合框和[vlookup]]函數可以製作簡単的動態國表.[vlookup]函數的功能是在表格數組的首列査找指定的值, 並由此返回表格數組當前行中其他列的值. [vlookup]函數的格式為: vl ...
  14. 智能報表工具FineReport中如何製作下拉複選框

    下面就通過智能報表工具FineReport來介紹一下如何製作. 工具/原料 智能報表工具FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  15. js製作的手機端下拉刷新加載

    js製作的手機端下拉刷新加載 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼.<nav class="navbar-header&qu ...
  16. 如何在 MS Excel 2016 製作自定義多項下拉菜單

    一篇好的經驗能夠教你深入了解某方面的知識和內容.你不止更懂得如何完成任務,還更懂得如何做的完美.你變得更有自信,而不只是只有知識的一個樹幹--只有光禿禿的樹幹,而沒有綠葉紅花.你會成為一位智者,對某一 ...
  17. 使用LAE軟體開發引擎製作軟體流程

    lae是一款運行於windows的界面開發工具,可以開發同時運行在windows.Linux.MacOX.iOS.Android等系統平台的軟體,windows桌面工具軟體.管理軟體.遊戲界面;  l ...
  18. 怎麼用java圖表開發FineReport製作圖表

    下面就通過java圖表開發FineReport來介紹一下如何製作圖表. 工具/原料 java圖表開發FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 ...
  19. 51單片機開發板製作

    學習51的菜鳥們首先需要一塊51開發板,這裡分享一款最實用的自製開發板,省錢又實用. 工具/原料 STC12c5A60s2,電子元器件,烙鐵 PC機.PCB繪圖軟體.STC下載器 方法/步驟 羅列開發 ...
  20. Execl實戰篇之公式的輸入

    公式 以等號開始的,當在工作表的空白單元格中輸入等號時,Excel就默認我們在進行一個公式的輸入.下面就來介紹一個怎麼輸入公式. 工具/原料 電腦 excel 2007 手動輸入公式 打開一個exce ...