這題目大概是為什摸我會想趕快把 octopress 換成 hexo，然後再寫些東西的動力之一。嗯、大概醞釀了大半年了歐。所以、我要來花很~~大的篇幅來寫這個。

起因

當然是因為工作上的需要啦~ XDD
對於這功能，我大概是生理上可以接受、但心理不能接受。可是、顯然這功能是必要的了…。

生理上：

• 的確有這種需求。
• 功能也很合理。

心理上：

• layout 根本不應該這樣啊！這種功能的長相就應該是 select + option 的組合！為什摸會是 input + dropdown！
• 這明明應該就很單純的、怎摸會是 option 還要有各種長相各種需求各種……！
• 為什摸明明就是 select + option，為什摸尼 option 還要可以變動！

所以、基於以上的原因，我對他感覺非常的矛盾。

曾經看過的 plugin 們

當然、除了這些，任性的前端和設計師們，也一定出了更多我沒有看過的版本！
這些 plugin 在使用上，多少都會有些問題，以我來說，大部份都會出在：

• 彈性不夠
  • layout 的限制。
  • 可調整的 option 不夠。
• 操作上
  • 不順暢。
  • 缺乏一些個人需要的狀態。

但是、有時候還是蠻方便的啦~

經典的 typeahead

• twitter-typeahead

• angular-typeahead

react

後來再導入 React 要使用 autocomplete 的時候，又去挖了一些 plugin。像是…

• react-select

• react-autocomplete

• react-typeahead

• react-selectbox

假想出的畫面和情境

有候選的情況

INPUT
HEADER
option(clickable)
option(clickable)
option(disabled)
option(clickable)
option(clickable)
FOOTER

未產生候選(錯誤或等待)

INPUT
HEADER
some message
FOOTER

第一版需求醞釀

• option 的 layout 要可以自訂。
  • 會有可以按的。
  • 會有不可以按的。
• header 要有。
• footer 也要有。
• 為了 http request 的各種等待、錯誤、找沒有，message 果斷要有。

但、不管header、footer、message，都可以偷懶視他們為 option，只是可以定義 option 的 layout 一切都不是問題。

天真的我、以為就這摸結束了。這樣的話、顯然曾經的 plugin 們，絕對找得到可以用的。(姑且不論那 layout 和 css 好不好套進去)

事情的真相

實際的需求會有類似下面的長相

autocomplete-1	autocomplete-2

然後 autocomplet-2 要向 tags-input 這樣的顯示方式，所以….
案情根本沒有像想像的單純！！！！！！ (根本就被騙了~)

哀傷的原因

• 因為 responsive ， desktop 和 mobile 寬度顯然不同 –> 塞兩個 input 也太擠了。
• desktop 和 mobile 操作習慣果然不一樣。

也許、大家都認為，這沒有太大的問題，不過就是把兩個 input 分開，然後、tags-input 嘛~ 上面提到的也是有支援噠！有什摸好哀傷的…

而事實的真相是，上述的 plugin：

• 要不就是導入真實的位置後，style 真的很難調整。
• desktop 和 mobile 的輸入習慣真的不同啊！(因為發現還不錯用、彈性大的 plugin，操作習慣比較偏向 mobile 輸入)
• 最讓人哀傷的是…. 我們用的是一個需要切換輸入法的語言。他們用起來都不順啊！

生了第二版需求

我們回顧第一版 然後再一條一條補：

• tags-input
  顯然、一個 input 裡面再疊上 1 層或 2 層 div 就為了一邊輸入一邊顯示 tags、嗯、還要可以刪除已經輸入的，我覺得這很麻煩，而且操作起來行為超怪、layout 也不合理，特別短短的寬度，輸入隨便就超過寬度，更難處理了。 input 就應該專心當他的 input 啊！
  • 聰明的同事想起了 pinterest 的輸入。太棒了！就決定是它了！
• mobile 上、兩個 input 太擠了
  太好了、聰明的同事把他們拆出來了，採用了一個本人真心不愛但是又提不出好想法，所以最後還是乖乖接受的方法那就是…
  • input 底下搭配 tab 切換各自不同的需求。

然後、開始了令人開心又哀傷的開發旅程！

to be continued…