html⽂本框智能提⽰,js⽂本框输⼊内容智能提⽰效果本⽂实例讲述了js⽂本框输⼊内容智能提⽰效果代码。分享给⼤家供⼤家参考。具体如下：
运⾏效果截图如下：
⼤体思路：
1.监听⽂本框事件。这⾥是⽤的keyup事件。⼤家可以尝试⽤onchange事件。不过感觉keyup事件的效果要好⼀点。
2.根据输⼊内容通过ajax异步的⽅式去访问后台数据。
3.遍历返回数据将数据添加到显⽰区域。
4.在添加数据的同时给每⼀条数据加上⼀些效果，点击其中⼀条将数据填到⽂本框，并且提⽰内容消失。
5.后台数据应该拼接成json格式。
具体代码如下：
⾃动提⽰
function txtchange() {
var nnmae = $("#intxt").val();
$.ajax({
type: "post",
url: "ashx/AutoNote.ashx",
data: { name: nnmae },
dataType: "json",
success: function (data) {
$("#tbcontent").html(""); //删除原有数据
if (data != "null") {
for (var i = 0; i < $(data).length; i++) {
$("#tbcontent").append('
' + data[i].name + '
');
}
$("#tbcontent").slideDown();
}
}
});
}
//选择其中的提⽰内容
function mousedown(object) {
$("#intxt").val($(object).text());
$("#tbcontent").fadeOut();
}
//⽂档框失去焦点，隐藏提⽰内容
function lost() {
$("#tbcontent").fadeOut();
}
.item:hover
{
background-color: Gray;
cursor:pointer;
}
.show
{
width: 200px;
z-index: 10;
display: block;
}
.hidden
{
width: 200px;
z-index: 10;
display: none;
border:1px solid rgb(80,160,91);
border-top:none;
}
table tr td
{
margin:none;
padding:none;
border:none;
}
js⽂本框输⼊内容智能提⽰效果，对于我们输⼊信息进⾏搜索很有实⽤价值，希望这篇⽂章对⼤家学习javascript 程序设计有所帮助。
html内容文本框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。