文本框输入时实现自动提示（像百度、google一样）

最新推荐文章于 2018-07-30 17:04:50 发布

原创最新推荐文章于 2018-07-30 17:04:50 发布 · 2.4k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

c# 专栏收录该内容

105 篇文章

订阅专栏

这篇博客介绍如何实现在网页文本框输入时，类似百度、Google的自动提示功能。通过引用jQuery库和相关JavaScript插件，结合AJAX从后台获取数据，动态填充提示内容。文章提供了详细的代码示例，包括JS配置、HTML元素设置以及后台处理程序的实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
<link rel="Stylesheet" href="../js/jquery.autocomplete.css" />

<link rel="stylesheet" href="../js/autocomplete.css" type="text/css">
<script type="text/javascript" src="../js/neverModules-autoComplete.js"></script>
引用上面的文件

<script language="javascript">



             var keyValues = [];

             var goodsAutoComplete = null;
             var goodsCompleteDataSource = [
           { 'text': '', 'content': '', 'hints': ''
           }];



             var autoComplete = null;
             onload = function pageLoadHdle() {
                 var configuration = {
                     instanceName: "autoComplete",
                     textbox: document.getElementById("demo"),
                     dataSource: goodsCompleteDataSource
                 };

                 autoComplete = new neverModules.modules.autocomplete(configuration);

                 autoComplete.callback = function (autocompleteValue, autocompleteContent) {
                     document.getElementById("tx").value =
          "Your text is:[" + autocompleteValue + "]; the content is:[" + autocompleteContent + "]";
                 }

                 autoComplete.useContent = true;
                 autoComplete.useSpaceMatch = true;
                 autoComplete.ignoreWhere = true;
                 autoComplete.create();
                 //autoComplete.expandAllItem();

                 autoComplete.showAnimateImage("../images/animated_loading.gif");

                 window.setTimeout(
          function closeAnimateImageAfter1seconds() {
              autoComplete.closeAnimateImage();
          }, 1000);

          onLoadGoods();
             }

      function onLoadGoods() {   //加载人员列表

          $.ajax({
              type: "POST",
              dataType: "text",
              data: { id:"a" },
              cache: false,
              async: false,
              url: "/dll/admin9h/showuser.ashx",
              success: function (datas) {

                  var data = jQuery.parseJSON(datas);

                  for (var property in data) {
                      var bean = data[property];
                      //此处将该数组填充值                            keyValues[bean.text] = bean.content;
                      goodsCompleteDataSource[property] = bean;
                  }

              }, error: function (xhr) {

                  alert("出现错误，请稍后再试:" + xhr.responseText);
              }
          });
      }

-----------------上面的是前台js----------

  <input id="demo"
      onkeyup="autoComplete.hdleEvent(event)"
      ondblclick="autoComplete.expandAllItem();"
      style="width:300px;font:10pt Arial;"/>
       | <a href="javascript:autoComplete.showAnimateImage();">showAnimateImage</a>
       | <a href="javascript:autoComplete.closeAnimateImage();">closeAnimateImage</a> |
      <br/>
      callback demo
      <textarea id="tx" style="width:100%; font:10pt Arial"></textarea>

-------------------上面的是html文件

推荐另一个

http://yuaoi.iteye.com/blog/1024484

http://blog.youkuaiyun.com/hongsejiaozhu/article/details/2584400

在一个

只要有三个文件：
一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件；
他们的下载地址：http://jqueryui.com/demos/autocomplete/

一个是一般处理程序；
一个是apsx页面，看下面的代码吧;
前台：

复制代码代码如下:

<script type="text/javascript">
$(document).ready(function() {
ShowUserList($("#TextBox1"), "LoginTest.ashx");
//TextBox1为 文本框的ID，loginTest.ashx为请求的一般处理程序。
function ShowUserList(obj, url) {
$.getJSON(
url,
function(msg) {
var names = new Array();
msg = msg.Table;
var names = new Array();
for (var i = 0; i < msg.length; i++) {
names.push(msg[i].loginName);
}
obj.focus().autocomplete(names);
}
);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="登录" />
</div>
</form>
</body>

后台是一般处理程序：

复制代码代码如下:

public class LoginTest : IHttpHandler
{
string str;
public void ProcessRequest(HttpContext context)
{
getUserName();
context.Response.Write(str);
}
public bool IsReusable
{
get
{
return false;
}
}
private void getUserName()
{
DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text);
str = ConvertJson.ToJson(ds);
}
}

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。