用jQuery的ajax的功能实现输入自动提示的功能

注意事项：要使用jQuery首先要把它的包引用进来（ <script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js"></script>）

本功能实现的原理简述：通过输入框的keyup事件，在后台把输入框当前的数据传入后台进行处理（以json格式传输），本例的后台处理文件是一个ashx文件。后台得到json数据后从数据库里取数据，然后回传到前台；前台显示的是一个类似百度和谷歌的下拉框，本例是这样实现的，把从后台传过来的每一个记录，通过jQuery动态生产一个<li></li>,然后把这些li放到一个div里取，再给这些li设置CSS，然后根据CSS就可以选择记录。

请看代码：

前台：

js文件：

HTML：

/*******************后台处理逻辑***************************/

public class AutoComplete : IHttpHandler
{
    public AutoComplete()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

if (context.Request.Params["keyword"] != null && context.Request.Params["table"] != null && context.Request.Params["field"] != null)
{

string keywordTemp=context.Request.Params["keyword"].ToString();
string tableTemp=context.Request.Params["table"].ToString();
string fieldTemp=context.Request.Params["field"].ToString();

string returnStr = "";
            returnStr = AutoCompleteGetResult.GetResult(keywordTemp, tableTemp, fieldTemp);
            context.Response.Clear();
            context.Response.Write(returnStr);
            context.Response.End();
        }
        else
        {
            context.Response.Clear();
            context.Response.Write("自动提示无法启动");
            context.Response.End();
        }
    }

public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

public class AutoCompleteGetResult
{
    public AutoCompleteGetResult()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }
    public static string GetResult(string keyword, string tableName, string field)
    {

        string[] key = keyword.Split(' ');
        StringBuilder sql = new StringBuilder();

        sql.Append("SELECT " + field + " FROM " + tableName + " where 1=1");

for (int i = 0; i < key.Length; i++)
        {
            sql.Append(" and " + field + " like '%" + key[i] + "%'");
        }

DataTable dt = DBClass.ExecuteDataSet(sql.ToString()).Tables[0];

        string returnStr = "";
        try
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                returnStr += Convert.ToString(dt.Rows[i][field]) + ";";
            }

        }
        catch { }

return returnStr;
}
}

转载于:https://www.cnblogs.com/laiss/archive/2010/09/25/1834715.html

用jQuery的ajax的功能实现输入自动提示的功能相关推荐

java 输入提示_Java实现输入自动提示与补全功能
一. 场景与目标在使用 IDE 开发软件时, IDE 会提供一种"智能提示", 根据所输入的字符列出可能的词组: 在日常Web开发中,根据用户输入进行自动提示和补全,也能很好地改 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
仿新浪邮件输入自动提示jQuery插件
一个邮箱提示控件,会自动提示你已经预设的邮箱! /** /** * 邮件输入自动提示插件 * author Newton * $('id').mailTip({ * mails: [], 需要提示的邮 ...
[转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时"加载中"提示的处理方法方法1:使用ajaxStart ...
Input 如何取消输入自动提示
Input 如何取消输入自动提示 input 用为日期插件的启动元素时,点击 Input 可能会被浏览器的输入提示挡住,如: 只需要把 input 设置 autocomplete="off& ...
使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo
如何使用 HTML5 实现文本框输入内容后带有模糊匹配的功能.这其实很简单,而且jQuery也为我们提供了相应的插件 Autocomplete.js.这不是一项新技术,百度一搜有很多相关的文章.在这 ...
输入自动提示——《超级处理器》应用
我们来看一段动画: 动画演示输入部分字段,自动提示完整的内容,这样的功能是不是很方便呢?尤其是对于复杂的内容,需要多次输入的重复内容,使用这样的功能,可以大大提高工作效率. 我们来看下,具体是怎么实 ...
android输入自动补全,Android用户输入自动提示控件AutoCompleteTextView使用方法
一.简介 1.AutoCompleteTextView的作用 2.AutoCompleteTextView的类结构图也就是拥有EditText的各种功能 3.AutoCompleteTextView ...
基于腾讯地图的输入自动提示与补全功能
当用户在地图的搜索框输入地点的关键词时,此时搜索框下拉列表将会有相关词供用户选择,即根据输入文本片段即显示相关的匹配信息,节省了用户的输入成本. 一.功能介绍关键词输入提示接口可以用于获取输入关键字 ...

用jQuery的ajax的功能实现输入自动提示的功能

用jQuery的ajax的功能实现输入自动提示的功能相关推荐

最新文章

热门文章