ASP实现类似谷歌的输入提示
0
悬赏园豆：30
[已解决问题]
解决于 2011-11-16 08:34
下面是JS代码：
1 <style type="text/CSS">
2 <!--
3 .keyWord {}{width:150px; height:20px; border:#0066FF 1px solid;}/**//*文本框样式*/
4 #keytishi {}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}/**//*提示层样式*/
5 #keytishi ul {}{ margin:0;}/**//*提示层样式*/
6 #keytishi ul li{}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}/**//*提示层样式*/
7 #keytishi ul li a {}{display:block; width:150px; height:16px; text-decoration:none;}/**//*提示层样式*/
8 #keytishi ul li a:hover {}{background-color:#0099FF;}/**//*提示层样式*/
9 -->
10 </style>
11 <script type="text/javascript">
12 <!--
13
14 //建立xmlhttpRequest对象
15 var xmlhttp;
16 try{
17 xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
18 }catch(e){
19 try{
20 xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
21 }catch(e){
22 try{
23 xmlhttp= new XMLHttPRequest();
24 }catch(e){}
25 }
26 }
27
28 function getKeyWord(){
29 var obj = document.getElementById("search");//获取文本域对象
30 if(obj.value==""){
31 return;
32 }
33 var top=0;
34 var left=0;
35 while(obj)...{//此循环得到文件域对象在页面中的绝对位置
36 top += obj["offsetTop"];
37 left += obj["offsetLeft"];
38 obj = obj.offsetParent;
39 }
40 xmlhttp.open("get","slkeyword.asp?keyword="+document.getElementById("search").value,true);
41 xmlhttp.onreadystatechange = function(){
42 if(xmlhttp.readyState == 4)
43 {
44 if(xmlhttp.status == 200)
45 {
46 if(xmlhttp.responseText!=""){
47 document.getElementById("keytishi").innerHTML = unescape(xmlhttp.responseText);//把后台返回的数据填充到提示层
48 document.getElementById("keytishi").style.left = left + "px";//设置提示层的位置,左
49 document.getElementById("keytishi").style.top = (top + 25) + "px";//设置提示层的位置,上
50 document.getElementById("keytishi").style.display = "block";//设置提示层可见
51 }else...{
52 document.getElementById("keytishi").innerHTML = "";//清空提示层
53 document.getElementById("keytishi").style.display = "none";//设置提示层不可见
54 }
55 }
56 else...{
57
58 }
59 }
60 }
61 xmlhttp.setRequestHeader("If-Modified-Since","0");
62 xmlhttp.send(null);
63 }
64 function input(str){
65 document.getElementById("search").value=str;//从提示层选择你需要的数据填充到文本框
66 document.getElementById("keytishi").innerHTML = "";//清空提示层
67 document.getElementById("keytishi").style.display = "none";//设置提示层不可见
68 }
69 //-->
70 </script>
下面是调用的text控件,JS和调用是在同个页面的
1 <input type="text" class="keyword" id="search" name="search" onKeyUp="getKeyWord();" onClick="getKeyWord();"/>
2 <div id="keytishi"></div>
最后是后台程序：
1 <%
2 dim rs
3 dim sql
4
5 dim keyWords
6
7 keyWrods = Request("keyword")
8
9 Set rs = Server.CreateObject("ADODB.Recordset")
10 sql = "select * from caption where title like '%"&keyWrods&"%'"
11 rs.open sql,conn,1,1
12 if not (rs.bof and rs.eof) then
13 Response.Write("<ul>")
14 do while not rs.eof
15 %>
16 <li><a href="Javascript:void(null);" onclick="input('<%Response.Write(escape(rs("keyword")))%>');"><%Response.Write(escape(rs("keyword")))%></a></li>
17 <%
18 rs.movenext
19 loop
20 Response.Write("<ul>")
21 end if
22 rs.close
23 set rs = nothing
24 conn.close
25 Set conn = nothing
26 %>
为什么没办法实现输入提示的功能呢？是不是哪里出错了？
没有分了，大家帮帮忙，指导指导！谢谢了
最佳答案
0
收获园豆：30
其他回答(3)
0
用jquery做吧，有插件可以很容易地实现：
http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
http://www.cnblogs.com/suneryong/archive/2009/08/05/1539254.html
有没有ASP版的。
0
类似谷歌的那种叫自动匹配，从你上面的代码来看是没有什么问题的，把东西打个包发出来让大家看一下吧。还有就是现在JQuery这么好用，为什么要自己去实现Ajax呢？
把代码发出来大家一起看看吧。
0
我曾经自己试着写过 仿google输入框输入提示功能，效果还算勉强可以，和你分享一下经验。
准备条件：
一个输入框 input --- 这里称做 input_,
输入框下方一个有边框的 div--- 这里称做 div_frame,
div 里面有的多个 div了先项--- 这里称做 div_li。
效果：
键盘弹起时，显示div_frame,并且把 input_的值为开头的所有数做为子选项显示在 div_frame中。
步骤：（使用 jQuery 是必须的）
1.获取数据源。(页面加载一次，仅查询一次数据库，把查得数据存入内存，以供后面调用)
我这里是加载页面的时候用 ajax 获取数据，用变量 var list = getList(); 存储。 function getList(){$.ajax(...)}
2.为 input_绑定计时器事件。
当 input_获得焦点后，每0.5秒调用一次 function compare(event) /* inupt_的 value和 list进行比较，返回以 input_的值开头的数据 */，当失去焦点后删除这个计时器事件。
//键盘弹起事件绑定
var timeoutId;//全局变量
$("#input_").keyup(function(event){
clearTimeout(timeoutId);//删除计时器事件
timeoutId = setTimeout(function(){
compare(event);
},500);
});
$("#input_").focus(function(){clearTimeout(timeoutId);});
3.根据 function compare(event)返回的数据对 div_frame 中的 div_li 进行排版，调用function itemView(items){}
呃 最主要的思路差不多说完了，剩下的就再简略一点说了。
4.当 input_获得焦点，input_的值为空时，div_frame 显示list的所有数据。
5.加载页面的时候，给body一个单击事件，用于隐藏 div_frame。
6.鼠标移入div_frame 后，去除body 单击事件 $("body").unbind({"click": hideViewMod});
var hideViewMod = function(){
$("#div_frame").hide();
}
7.鼠标移出div_frame 后，再次添加这个单击事件
使用jQuery的 hover()
8.给 div_li 绑定单击事件
9.在 div_frame 外单击后，div_frame被隐藏，要去除 body单击事件
