textfield文本框实现类似google的下拉提示功能

问答首页 → Web前端技术

0 0

textfield文本框实现类似google的下拉提示功能20

想要根据textfield中的值变化，实时查找数据库。最好有列子看下。。。

JavaScript EXT

2010年11月19日 11:29

feilafei123
10
0 0 0

10个答案按时间排序按投票排序

0 0

这种类似google下拉框的插件有很多，jQuery就提供了好几种，可以搜索一下。另外数据强烈建议不要从数据库里面取，太耗费数据库资源了，还是放在缓存里面定期更新性能比较好。

2010年12月02日 15:42

zzy9zzy
180
0 0 0

添加评论

0 0

我写这个的时候底层用的是框架ssh。。。我把底层发给你。。。如果你还弄不出来我也可以给你写个简单的jsp或是mvc帮助你理解下。。。数据库你就自己弄吧。。。
我把那工程直接发给你好了。。。

2010年12月01日 16:06

tomcat的问题
20
0 0 0

添加评论

0 0

给你个input文本框下拉的代码你把它改成textfield文本框就好了。。。技术就是AjAx。。。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.box{
margin:auto;
text-align: left;
margin-top: 100px;
width: 300px;
text-align: center;
}
.box input{
width:100%;
height: 30px;
font-size: 25px;
}
.box #auto{
text-align: left;
border:1px solid #ccc;
}
.box #auto ul{
list-style: none;
line-height: 23px;
}
.active{
background-color: blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//定时器，对按键加一个缓冲，避免频繁按键对服务端产生不必要的压力
var timer;
var hightLightIndex = -1; //高亮显示的元素索引值
$(document).ready(function(){
//获取文本框
var wordInput = $("#word");
//获取文本框在页面中的位置
var wordInputOffset = wordInput.offset();
var wordInputLeft = wordInputOffset.left;
var wordInputTop = wordInputOffset.top;

//设置自动提示层的位置和样式,初始化是隐藏的
$("#auto").hide().css("position","abosulte")
.css("left",wordInputLeft)
.css("top",wordInputTop)
.css("width",wordInput.width()+2);

//给文本框添加键盘事件
wordInput.keyup(function(event){
event = event || window.event;
//获取按键值
var keyCode = event.which;

//如果输入的是字母、数字、退格键或者del键，则发送请求
if((keyCode >= 65 && keyCode <= 90) || keyCode == 8 || keyCode == 46){
var keyword = wordInput.val();
//如果文本框内容不为空，则想服务器发送请求
if($.trim(keyword) != ""){
//取消上次未完成的延时操作
clearTimeout(timer);
//延时500毫秒发送请求
timer = setTimeout(function(){
var url = "news.do";
var data = {"keyword":keyword};
//想服务器发送异步请求
$.post(url,data,function(data){
var result = eval(data);
//获取UL
var ul = $("#auto ul");
ul.empty();
$(result).each(function(){
var li = $("<li>"+this.newsTitle+"</li>");
ul.append(li);
});

//如果有内容，则显示提示内容,没有则隐藏
if($("#auto li").length > 0){
hightLightIndex = 0;
$("#auto li").eq(hightLightIndex).addClass("active");
$("#auto").show();
} else{
$("#auto").hide();
hightLightIndex = 0;
}
});
},500);
} else{
//如果没有内容，则隐藏提示层
$("#auto").hide();
}
}
//如果是上下键,则处理选择
var resultCount = $("#auto li").length;
if(keyCode == 40 || keyCode == 38){
$("#auto li").eq(hightLightIndex).removeClass("active");
if(keyCode == 40){
//选中索引自增，如果已经是最后一个，则等于0
hightLightIndex ++;
if(hightLightIndex == resultCount)
hightLightIndex = 0;
} else if(keyCode == 38){
hightLightIndex --;
if(hightLightIndex == -1)
hightLightIndex = resultCount - 1;
}

$("#auto li").eq(hightLightIndex).addClass("active");
}
});
});
</script>
</head>

<body style="text-align: center;">
<div class="box">
<div class="title">
<h3>我的自动补全</h3>
</div>
<input id="word" />
<div id="auto">
<ul></ul>
</div>
</div>
</body>
</html>

2010年12月01日 15:59

tomcat的问题
20
0 0 0

添加评论

0 0

这个可以根据事件处理。
无非就是想知道变化后的内容，而后匹配数据库。

2010年11月29日 16:10

flootball
495
0 0 0

添加评论

0 0

直接使用Ext.form.ComboBox 组件支持你的要求。

var com = new Ext.form.ComboBox({    
            autoLoad : false,    
            fieldLabel : "申请人",    
            store : new Ext.data.JsonStore({    
                        url : 'scmBaseAction!getEmpUser.action',    
                        root : 'empUserList',    
                        fields : ["id", "empName"]    
                    }),    
            displayField : 'empName',    
            valueField : 'id', // 传向后台的值    
            typeAhead : true,    
            loadingText : 'Searching...',    
            minChars : 1,    
            mode : 'remote',    
            emptyText : '请输入',    
            forceSelection : true,    
            hideTrigger : true,// 隐藏三角下列图片    
            queryParam : 'empUserNum' //设置查询参数名称    
        })

2010年11月22日 09:53

lizhi92574
2096
0 0 1

添加评论

0 0

建议使用一个啊autocomplete的JS插件，使用很简单！
需要：autocomplete2.css，autocomplete.js，prototype.js
前台这么用：
<script language="javascript">
new Autocomplete('brand', function() {
return '${ctx}/HTML/basic/auto/AutoCompeletAction.do?method=filterBrand&setName=brand&likeBeginValue=' + $("brand").value;
});
</script>
后台返回一个这样的串：
<li onselect="$('textfieldName')=123">123</li>
<li onselect="$('textfieldName')=123">123</li>
<li onselect="$('textfieldName')=123">123</li>
<li onselect="$('textfieldName')=123">123</li>
<li onselect="$('textfieldName')=123">123</li>
就OK了!

2010年11月20日 18:59