今天做的是實現點擊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方法，最後就是搜尋按鈕的實現了，這樣要跟後台交互獲取數據（當然也可以在點擊列表中的數據時直接提交搜尋，這樣會更簡單便捷，就看個人需求了）。
