前言
雖然使用的技術比較老了，但是思想卻還是適用於現在的vue等框架。
一：實現的樣式
二：實現包括的功能點
1：下拉框內容是表格，類似於一個彈窗
- 表格內容最多六行，超出的顯示滾動條，表頭固定，可滾動。
- 支持鍵盤上下鍵，進行當前項的選擇
- 支持鍵盤的enter選擇鍵，並支持回調函數，進行頁面的數據綁定
- 支持加載后台數據
- 支持綁定指令的input框對數據的搜索功能
- 支持input框填寫的內容的校驗，如果內容是手寫的，則清空，必須是從選擇框內選擇的（點擊選擇或者enter選擇）等功能
- 支持后台無數據時，顯示無加載內容。
- 在請求后台時，在當前下拉框添加加載等待動畫。
2：下拉內容是常見的select框形式
- 內容與表格基本一致
- 存在即有使用的地方，可根據自己的需要決定是否使用。
功能點總結：其實與原生的select下拉框形式一樣，只不過是進行了一次封裝，添加了與后台交互的邏輯。沒辦法，所有的實現都是因為需求的存在，說激進點，如果不是產品想出這個需求，我也不會去做。添加一句：萬惡的產品。
三：實現的邏輯
封裝一個angularjs的指令，通過傳參將指令需要用到的數據從父層傳到子層。指令控制如何展示與一些交互。父子只有數據的傳輸，沒有操作上的控制。
首先，我們知道angularjs指令可以獲取到父元素的方法，雙向綁定的數據，常量字符串等。
-
對當前input框進行指令綁定，進行父子級的通信，傳參大概包括：數據請求函數，渲染的類型（table select data city等，只要有數據，再進行頁面UI修改即可），下拉彈窗的大小值指定，沒有數據時下拉框顯示的新建按鈕名稱與綁定的事件，當前input上綁定的model（用來做清空input）
- 當所需要的傳參數據全部都有時，需要對下拉彈窗里的內容進行事件綁定，包括：input的focus調用后台接口，blur進行input的清空（填寫的數據不符合要求時），上下鍵對當前渲染的項進行選擇，enter鍵觸發數據綁定。
- 根據數據進行渲染彈窗類型，使用ng-if進行彈窗內容的UI顯示。比如ng-if==table ng-if==select 進行彈窗渲染。
四：實現的代碼思想分析：
- angularjs的指令進行父子通信時，需要注意的就是scope的取值，傳函數表達式時，scope = ‘&’ ，傳model時 scope = ‘=’ ，傳固定值時 scope='@'
- 一些函數寫在父級ctr里，比如請求后台的函數。因為不同的頁面需要，可能數據返回成功后有不同的操作，所以這個不好封裝在指令里，需要保持指令的活性，如果你不想將請求后台的數據放在父controller里，也可以將請求地址傳給指令，這樣就可以在指令（子層）進行請求。
- table渲染時，也是封裝了一個指令，這樣之后在需要用到這個table指令時，可以較好較快的抽出使用
五：重點分析下拉框的table實現
本文只去進行table的實現，這樣用戶可以自己進行擴展。
- 指令html
- 父級ctroller
- 指令js
六：后續擴展與補充
- 如果在進行后台數據交互時，只針對當前input框內的model進行操作，可以將后台接口傳到指令里，在指令里進行數據的交互，這樣就完全脫離父級，成為一個獨立的指令，相當於一個angularjs的插件。