今天小编就为大家带来一篇输入框实现联想输入的文章。小编觉得挺不错的，为此分享给大家做个参考。一起跟随小编过来看看吧。
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、优化：
谁用谁优化。
关于输入框实现联想输入就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
