工具/材料

Sublime Text

操作方法

• 01

  首先打開(kāi)Sublime Text軟件，搭建好頁(yè)面，然后引入樣式庫(kù)文件，如下圖所示

  
• 02

  接下來(lái)在script中添加jquery的腳本庫(kù)文本，如下圖所示，智能提示的相關(guān)功能都在jquery-ui.min.js文件中

  
• 03

  然后在body標(biāo)簽中準(zhǔn)備輸入框，如下圖所示，注意給輸入框一個(gè)id屬性，方便定位

  
• 04

  界面都搭建好以后，就需要準(zhǔn)備數(shù)據(jù)源了，這里為了演示，小編準(zhǔn)備了一個(gè)字符數(shù)組，如下圖所示

  
• 05

  當(dāng)然在正規(guī)的項(xiàng)目中，數(shù)據(jù)源都是從后臺(tái)獲取的，如下圖所示，通常運(yùn)用ajax從后臺(tái)獲取

  
• 06

  接下來(lái)就是通過(guò)autocomplete方法來(lái)進(jìn)行智能提示實(shí)例化，如下圖所示，注意傳入數(shù)據(jù)源信息

  
• 07

  最后我們運(yùn)行程序，你會(huì)在界面中看到如下圖所示的內(nèi)容，當(dāng)你輸入一個(gè)字母以后，它會(huì)給你包含這個(gè)字母的內(nèi)容信息，如下圖所示