今天小编就为大家带来一篇输入框实现联想输入的文章。小编觉得挺不错的，为此分享给大家做个参考。一起跟随小编过来看看吧。

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 > </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、优化：
谁用谁优化。

关于输入框实现联想输入就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。