首页 新闻 搜索 专区 学院

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 %>

为什么没办法实现输入提示的功能呢?是不是哪里出错了?

没有分了,大家帮帮忙,指导指导!谢谢了



ASP
Mr.ch的主页 Mr.ch | 初学一级 | 园豆:6
提问于:2011-11-14 23:18
< >
分享
最佳答案
0

太简单了。。用jQuery的插件:autocomplete 即可实现。不懂的话加我QQ:939881475

http://www.ztdch.cn/huajiao/

在输入框里面输入:测试

收获园豆:30
快乐的langYa | 菜鸟二级 |园豆:314 | 2011-11-15 09:47
其他回答(3)
0
artwl | 园豆:16536 (专家六级) | 2011-11-15 09:16

有没有ASP版的。

支持(0) 反对(0) Mr.ch | 园豆:6 (初学一级) | 2011-11-15 12:31
0

类似谷歌的那种叫自动匹配,从你上面的代码来看是没有什么问题的,把东西打个包发出来让大家看一下吧。还有就是现在JQuery这么好用,为什么要自己去实现Ajax呢?
把代码发出来大家一起看看吧。

杰之蓝 | 园豆:210 (菜鸟二级) | 2011-11-15 09:21
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单击事件

xiaoyue001 | 园豆:194 (初学一级) | 2011-11-15 11:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册