asp.net+ajax+sqlserver自动补全功能实现解析

代码下载

说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库。

参考(向其作者致敬):

² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码。利用jquery.autocomplete插件利用js实现了自动补全功能。由于我的需要是结合sqlserver数据库表实现自动补全功能。就下来就是将数据库表转为js数组,自然而然就想到了ajax。

² Asp.NetAjax的两种基本开发模式这篇文章中的第二部分就是说:js调用webservice的示例。

代码解析。

1.添加webservice文件。

添加新项--“启用了AJAX的WCF服务” 将新文件命名为DBService.svc.

2.在DBService.svc中添加函数,函数返回值就是 提示自动补全的数据。


代码如下:

[OperationContract]
public string getSortList()
{
List<string> sorts = new List<string>();
using (SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["zhui.pc"].ConnectionString))
{
cn.Open();
SqlCommand cmd = new SqlCommand("select [LastName] from [dbo].[Employees]", cn);
DataTable dt = new DataTable();
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(dt);
}

foreach (DataRow row in dt.Rows)
{
sorts.Add(row[0].ToString());
}

cn.Close();
}
return string.Join(",", sorts.ToArray());
}

3.在default.aspx文件添加js、css文件:


代码如下:

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
<link href="Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

4.在default.aspx的head部分中$().ready(function ())函数中调用webservice获取自动补全的数据,并将数据关联到输入框中。


代码如下:

<script type="text/javascript">
$().ready(function () {

NewsSort.getSortList(OnComplete, OnFailed, null);

function OnComplete(args, context) {
$('#MainContent_searchBox').AutoComplete({
'data': args.split(","),
'itemHeight': 20,
'listDirection': 'down',
'width': 280
}).AutoComplete('show');
}

function OnFailed(args) {
alert("出错了!");
}
});
</script>

5.Finish。

(0)

相关推荐

  • JSP + ajax实现输入框自动补全功能 实例代码

    下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();

  • ajax来自动补全表单字段示例

    源代码: 脚本一: <!DOCTYPE html> <html> <head> <title>Auto-fill Form Fields</title> <link rel="stylesheet"href="script06.css" rel="external nofollow" > <script src="script06.js">&l

  • Ajax实现搜索引擎自动补全功能

    每当我们遇到一些问题时候,我们会百度一下,你是有过我们的问题还没打完就已经出现的经历? 如下图: 天猫: 京东: 这时候的你是否想到如何实现这个功能? 我们的网页明明没有刷新,可是却出现了数据的交互,也就是Ajax的强大之处. 下面以一个例子来实现. 搜索框和搜索按钮,我们希望在搜索框输入部分书名时,能够实现书名的自动补全功能.每当点击了相应的书名,就把内容输入到搜索框. 对应的代码 Search <input type="text" name="name"

  • asp.net+ajax+sqlserver自动补全功能实现解析

    代码下载 说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表实现自动补全功能.就下来就是将数据库表转为js数组,自然而然就想到了ajax. ² Asp.NetAjax的两种基本开发模式这篇

  • Ajax实现关键字联想和自动补全功能及遇到坑

    目录 遇到的小坑 代码实现 前端代码 后端代码 用到的实体类 自己封装的jdbc工具类 数据库表: 效果展示: 遇到的小坑 回调函数相对window.onload的摆放位置 给回调函数addData传数据时,如何操作才能将数据传进去 代码实现 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax实现关键

  • Bootstrap3使用typeahead插件实现自动补全功能

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • eclipse自动提示和自动补全功能实现方法

    解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现的选项中,有一个Auto activation triggers for Java: 会看到只有一个"."存在.表示:只有输入"."之后才会有代码提示 3.先把上图中"."的地方输入几个随便的字符,例如"dsfd",点最下面的&q

  • easyui-combobox 实现简单的自动补全功能示例

    前台:  Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCh

  • jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht

  • jQuery实现Email邮箱地址自动补全功能代码

    本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

随机推荐