輸入框聯想輸入
阿新 • • 發佈：2018-09-21
mar 利用 tel als ant 常常 center oct 分享圖片 筆者，不玩網遊還差4天就兩個月了。我常常覺得，過往的都是不堪回首的，但現在又何嘗不是。有時候，我的腦海裏會浮現一首歌：“早知道是這樣 像夢一場，我才不會把愛都放在同一個地方”。只有一句，來來回回的重復?? ??? ?????. ?? ??? ??? ????。??? ?? ?? ???? ?? ??? ??? ??? ???????。
輸入框的聯想輸入，有許多的實現方式。在這裏，筆者只是挑一種實現了其中的原理，至於細節優化，見仁見智了。
1、利用autocomplete：簡單的實現代碼
輸入框的聯想輸入，有許多的實現方式。在這裏，筆者只是挑一種實現了其中的原理，至於細節優化，見仁見智了。
1、利用autocomplete：簡單的實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery文本框聯想補全自動完成插件</title> <link rel="stylesheet" href="css/autocomplete.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="demo"> <div class="wrapper"> <div id="search-form"></div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘microsoft yahei‘;"> </div> </body> <script type="text/javascript" src="js/jquery.js"></script> <!-- 與jquery.autocomplete.js不同哦 -- > <script type="text/javascript" src="js/autocomplete.js"></script> <script> //考慮，從數據庫獲取這樣的數據。根據人員選擇的個性化數據 //考慮，搜索事件用戶的輸入數據進行個性化存儲 var proposals = [ ‘一低昂要減肥啊‘, ‘減肥療法‘, ‘饑餓減肥‘, ‘運動減肥‘, ‘red_ant‘, ‘drink‘, ‘beer‘, ‘fruit‘, ‘手套‘, ‘hotel‘, ‘小黃車‘, ‘哈哈哈‘, ‘motorbike‘, ‘該減肥了‘, ‘請減肥‘, ‘減肥‘ ]; $(document).ready(function() { $(‘#search-form‘).autocomplete({ hints: proposals, width: 300, height: 30, onSubmit: function(text) { alert(text); } }); }); </script> </html>
2、實現效果：
3、不足之處：
可以看出，我們的一些數據如：drink、beer、fruit等帶有“r”的詞匯並沒有查出。
4、兼容性：
可以看出IE5以及IE5+都是支持的。
5、優化：
誰用誰優化。
輸入框聯想輸入