【【救急！！！求ajax效果，类似google搜索框自动提示】】

wdywqc 2011-04-12 09:08:14

不能使用第三方空间比如（AjaxPro.dll）和ajax控件，代码完全自己写，来实现这一效果。谁有代码给我发一下，谢谢，我是第一天进公司，这是上面布置下来的任务，完不成就死定了。
我的qq：976576360，谢谢了。随时在线(可能潜水呢)，各位大虾救救急吧

...全文

172 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

无涯大者 2011-04-12

打赏
举报

智能匹配检索用纯JS来实现，确实挺困难的。
借助第三方控件话，可以很简单的通过ASP.NEt AJAX Control Toolkit中的 AutoCompleteExtender控件

wdywqc 2011-04-12

打赏
举报

[Quote=引用 8 楼 wxr0323 的回复:]
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefi……
[/Quote]
无语，看清帖子再回复嘛，不能用ajax控件和第三方控件，代码完全自己手写

子夜__ 2011-04-12

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  

   

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  

   

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  

 <html xmlns="http://www.w3.org/1999/xhtml">  

 <head runat="server">  

     <title>AJAX控件之AutoComplete</title>  

 </head>  

 <body style="text-align: center">  

    <form id="form1" runat="server">  

         <asp:ScriptManager ID="ScriptManager1" runat="server" />  

         <div>  

             <asp:TextBox ID="MyAuto" runat="server" Width="191px"></asp:TextBox><br />  

             <br />  

             <cc1:AutoCompleteExtender ID="ace" runat="server" CompletionInterval="100" MinimumPrefixLength="1"  

                 ServiceMethod="GetCompletionList" ServicePath="WebService.asmx" TargetControlID="MyAuto">  

             </cc1:AutoCompleteExtender>  

              </div>  

     </form>  

</body>  

</html>

# using System;  

 using System.Web;  

 using System.Collections.Generic;  

 using System.Web.Services;  

 using System.Web.Services.Protocols;  

   

   

 /// <summary>  

 /// WebService 的摘要说明  

 /// </summary>  

 [WebService(Namespace = "http://tempuri.org/")]  

 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  

 //用以调用Web Service方法签名  

 [System.Web.Script.Services.ScriptService]  

 public class WebService : System.Web.Services.WebService {  

   

     public WebService () {}  

   

     [WebMethod]  

     public string[] GetCompletionList(string prefixText, int count)  

     {  

         //if (count == 0)  

         //{  

         //    count = 10;  

         //}  

         Random random = new Random();  

         List<string> items = new List<string>(count);  

         for (int i = 0; i < count; i++)  

         {  

             char c1 = (char)random.Next(65,90);  

             char c2 = (char)random.Next(97, 122);  

             char c3 = (char)random.Next(48, 57);  

             char c4 = (char)random.Next(33, 43);  

             items.Add(prefixText + c1 + c2 + c3 + c4);  

         }  

         return items.ToArray();  

     }  

   

}

最简单的

wdywqc 2011-04-12

打赏
举报

[Quote=引用 6 楼 jzcldy 的回复:]
顶顶更健康老大那不是用js 读取的，是用js发送ajax请求读取的
看下这个
http://www.w3cschool.cn/ajax_database.html
[/Quote]
哥哥能针对我的这个例子来写下代码吗

jzcldy 2011-04-12

打赏
举报

顶顶更健康老大那不是用js 读取的，是用js发送ajax请求读取的
看下这个
http://www.w3cschool.cn/ajax_database.html

wdywqc 2011-04-12

打赏
举报

[Quote=引用 4 楼 amandag 的回复:]
写一个handler返回数据
[/Quote]
不会 ⊙﹏⊙b 我是菜鸟

amandag 2011-04-12

打赏
举报

写一个handler返回数据

wdywqc 2011-04-12

打赏
举报

[Quote=引用 1 楼 hch126163 的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title……
[/Quote]
这是数据时写死的，我的数据在Access数据库中，js怎么读取Access中的数据呢，谢谢大虾

zthsn 2011-04-12

打赏
举报



<meta charset="utf-8">

	

	<script>

	$(function() {

		var availableTags = [

			"ActionScript",

			"AppleScript",

			"Asp",

			"BASIC",

			"C",

			"C++",

			"Clojure",

			"COBOL",

			"ColdFusion",

			"Erlang",

			"Fortran",

			"Groovy",

			"Haskell",

			"Java",

			"JavaScript",

			"Lisp",

			"Perl",

			"PHP",

			"Python",

			"Ruby",

			"Scala",

			"Scheme"

		];

		$( "#tags" ).autocomplete({

			source: availableTags

		});

	});

	</script>





	

<div class="demo">



<div class="ui-widget">

	<label for="tags">Tags: </label>

	<input id="tags" />

</div>



</div><!-- End demo -->

这是例子
提供原文地址给你:http://jqueryui.com/demos/autocomplete/#default
里面还有很多种方式

hch126163 2011-04-12

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title></title>

    <style type ="text/css">

    html,body{width:100%;height:100%}

    ul{padding:0px;margin:0px;list-style:none;}

    li{cursor:pointer;padding:0px 5px; line-height:25px;height:25px;}

    </style>

</head>

<body>

 <p>

    <input type='text' id='txtInput'  onkeyup='getSearchKeys()'/>

    <div id='divShow' style="position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd">

    <ul>

    <li>aaa</li>

    </ul>

    </div>

    </p>

</body>

<script type="text/javascript">

var keys=['ada','sdfsd','bbb','sfga','dfhgfh','235s','dfew','ghjk','hjkghjk','fgjgfjf','fghjgfj','2345f','fthtr','sfgerw','tyerth','vnmu','wertewr','wert','asdfaf','zxcvd','gkju','dvfgdh','2354af','adsf','erterter','fghdfg','xvdfg','kjhu','qweasdas','xzce','werwre','zzczc','rtewtrew']; //  搜索值，可以用Ajax从数据库获取

var txtInput ;

var divShow ;

window.onload=function()

{

     txtInput =document.getElementById("txtInput");

     divShow = document.getElementById("divShow");

     var p =getAbsPoint(txtInput);

     divShow.style.left = p.x +'px';

     divShow.style.top = p.y + txtInput.offsetHeight + 'px';

   txtInput.onclick = divShow.onclick=function(e)

    {

         e = e||event;

         var t = e.target||e.srcElement



        if(t.tagName.toLowerCase()=='li')

        {

          txtInput.value = t.innerHTML; 

           divShow.style.display = "none";

           return;

        }

        if(e && e.stopPropagation){

          //W3C取消冒泡事件

          e.stopPropagation();

          }else{

          //IE取消冒泡事件

          window.event.cancelBubble = true;

          }

    };

    document.body.onclick=function(e)

    {

        divShow.style.display = "none";

    };

};

function getSearchKeys()

{

  var s= txtInput.value;

    if(s=='')

    {

        divShow.style.display = "none";

        return;

    }

      var arr=['<ul>'];

      for(var i=0;i<keys.length;i++)

      {

        if(keys[i].indexOf(s)>=0){

        arr.push('<li>'+keys[i]+'</li>');

        }

      }

    

      if(arr.length>1){

        arr.push('</ul>');

        divShow.innerHTML = arr.join('');

        divShow.style.display = "block";

      }else{

        divShow.style.display = "none";

      }

}



function getAbsPoint(e)

{

    var x = e.offsetLeft;

    var y = e.offsetTop;

    while(e = e.offsetParent)

    {

        x += e.offsetLeft;

        y += e.offsetTop;

    }

    return {"x": x, "y": y};

}

</script>

</html>