输入框联想功能
在实际开发中想必大家肯定会遇到如何简化输入框功能,传统的输入框是需要直接输入检索需要的所有关键词,然后提交发起检索,但这样太过于死板,不够灵活,类似于下拉菜单一样,但下拉菜单只能选择,有却是了输入的功能,接下来我们就来研究研究如何实现输入框的联想功能。
废话不多说,直接上效果图:源码下载
若你也在为如何实现上图效果发愁,不用急,代码即刻送上:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div align="center">
<h2 class="demoHeaders">输入框联想功能</h2>
<div>
<input id="autocomplete" title="type "a"">
</div>
</div>
<script>
$("#accordion").accordion();
var availableTags = [
"卢造发",
"卢造发1",
"卢造发2",
"卢造发3",
"卢造发4",
"卢造发5"
];
$("#autocomplete").autocomplete({
source: availableTags
});
</script>
</body>
</html>
就这么简单,用户只需根据业务需求,通过ajax实时获取后台数据,更改availableTags 内容即可。
还没完,上面只是一小部分,若需要通过Django将此功能部署到后台,请看效果图:
输入关键字,下拉显示所有联想数据:
点击下拉显示数据即可选中:
将选中数据填入输入框:
若对此感兴趣,请点击:获取源码,希望对你有帮助,与君共勉。