如何实现文本框的自动完成功能
实现文本框自动完成功能的方法
文本框的自动完成功能通常可以通过编程语言中的库或框架来实现。以下是一些常见的实现方式：
HTML + JavaScript
您可以使用HTML和JavaScript结合来创建一个简单的自动完成功能。这里是一个基本的示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框自动完成</title>
<style>
/* CSS样式 */
#divInput {
margin: 20px auto;
padding: 20px;
width: 280px;
background-color: bisque;
}
#divInput ul,
#divInput li {
padding: 0;
margin: 0;
list-style: none;
}
#autoInput {
width: 240px;
padding: 0 20px;
margin: 0;
border: 0;
height: 36px;
line-height: 36px;
}
#popInput {
position: relative;
}
#uiInput {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: #d8d8d8 1px solid;
border-left: #d8d8d8 1px solid;
border-right: #d8d8d8 1px solid;
}
#uiInput li {
padding-left: 20px;
border-bottom: #d8d8d8 1px solid;
line-height: 28px;
background-color: #f5f5f5;
cursor: pointer;
}
</style>
</head>
<body>
<div id="divInput">
<input type="text" placeholder="请输入英文、数字测试自动完成" id="autoInput" />
<div id="popInput">
<ul id="uiInput"></ul>
</div>
</div>
<script>
var arr = ["123", "234", "456a", "123345", "aaaaa", "bbbb", "88888", "asai", "asai.cc", "www.asai.cc"];
var inputDom = document.getElementById("autoInput");
var popDom = document.getElementById("uiInput");
function listenInput(e) {
var _val = e.target.value.trim();
var _lis = [];
if (_val) {
arr.forEach((str) => {
if (str.indexOf(_val) !== -1) {
_lis.push("<li>" + str.replace(_val, "<font color=red>" + _val + "</font>") + "</li>");
}
});
}
popDom.innerHTML = _lis.join("");
}
function listenClick(e) {
if (e.target.tagName.toLowerCase() === "li") {
var _val = e.target.innerText;
inputDom.value = _val;
}
}
inputDom.addEventListener("input", listenInput, false);
popDom.addEventListener("click", listenClick, false);
window.addEventListener("beforeunload", function (e) {
inputDom.removeEventListener("input", listenInput, false);
popDom.removeEventListener("click", listenClick, false);
});
</script>
</body>
</html>
在这个例子中，我们创建了一个文本输入框和一个下拉列表，当用户在输入框中输入文字时，会动态显示与输入内容相匹配的选项。如果用户点击了某个选项，则该选项会被插入到输入框中。
jQuery Autocomplete
如果您熟悉jQuery，可以使用其提供的Autocomplete插件来实现更复杂的自动完成功能。以下是一个使用jQuery Autocomplete的示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Autocomplete</title>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script src="jquery.autocomplete.js" type="text/javascript"></script>
<style>
/* CSS样式 */
#divInput {
margin: 20px auto;
padding: 20px;
width: 280px;
background-color: bisque;
}
#divInput ul,
#divInput li {
padding: 0;
margin: 0;
list-style: none;
}
#autoInput {
width: 240px;
padding: 0 20px;
margin: 0;
border: 0;
height: 36px;
line-height: 36px;
}
#popInput {
position: relative;
}
#uiInput {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: #d8d8d8 1px solid;
border-left: #d8d8d8 1px solid;
border-right: #d8d8d8 1px solid;
}
#uiInput li {
padding-left: 20px;
border-bottom: #d8d8d8 1px solid;
line-height: 28px;
background-color: #f5f5f5;
cursor: pointer;
}
</style>
</head>
<body>
<div id="divInput">
<input type="text" id="name" />
</div>
<script>
$(document).ready(function(){
var info = [
{ name: "张三", sex: "男", phone: "15633334444" },
{ name: "李四", sex: "男", phone: "13344445555" },
// ... 更多数据
];
$("#name").autocomplete(info, {
max: 10, // 列表里的条目数
minChars: 0, // 自动完成激活之前填入的最小字符
width: 200, // 提示的宽度，溢出隐藏
scrollHeight: 300, // 提示的高度，溢出显示滚动条
matchContains: true, // 包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
mustMatch: false,
autoFill: true, // 自动填充
formatItem: function(row, i, max) {
return row.name;
},
formatMatch: function(row, i, max) {
return row.name;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted){ // 关联出其他信息
if(row == undefined || row.name == undefined ) {
} else {
$("#sex").val(row.sex);
$("#phone").val(row.phone);
}
});
});
</script>
</body>
</html>
在这个例子中，我们使用了jQuery Autocomplete插件来实现自动完成功能。当用户在文本框中输入时，会显示与输入内容相匹配的数据列表。如果用户选择了某个项目，那么除了显示该项的名称外，还可以自动填充与其相关的其他信息。
以上两种方法都是基于客户端实现的，不需要服务器端支持。如果您需要服务器端支持，例如从数据库中获取数据进行自动完成，那么您可能需要使用Ajax技术来实现客户端和服务器之间的数据交换。
免责声明：《如何实现文本框的自动完成功能》来源于互联网，仅供参考。如有疑问，请及时联系本站处理。
<< 上一篇
下一篇 >>