zoukankan      html  css  js  c++  java
  • .net 使用jQuery Autocomplete(自动完成)插件结合ajax

    想做一个搜索时自动补全功能,在网上搜了几个方法,发现国内的方法都是一错全错,可能copy过多吧,最后还是使用了一个国外的jquerry autocomplete的演示例子完成了

    做模仿的效果如下:

    下面演示一个简单jquery autocomplete方法:

    先导入两个开发包:

    <script src="JQ/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="JQ/jquery.autocomplete.js" type="text/javascript"></script>

    还有一个css样式

    <link href="style/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

    js  code:

    <script type="text/javascript">

    var websites = [
    "Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
    "Taobao", "Tom", "tahoo", "tavaEye", "tsdn", "Alipay"
    ];
    $().ready(function() {
    $("#usercode").autocompleteArray(websites);
    });
    </script>


    html code:

    <td width="60">用户名:</td>
    <td><input type="text" id="usercode" runat="server" class="text-medium" /></td>

    简单数组型的,使用起来非常方便,效果如下:

    看到一些站的用数组的时候都是直接用的autocomplete,但其实并不能实现,直接用数组必须得用autocompletearray

    ajax 动态检索数据库现实 autocomplete

    js code:

    <script language="javascript" type="text/javascript">
    $(document).ready(function ()
    {
    $('#usercode').autocomplete('Ajax/SearchAdminCode.ashx', {
    minChars: 0,//minChars表示在自动完成激活之前填入的最小字符,这里我们设置为0
    max: 5, //max表示列表里的条目数,我们设置了5,所以显示5条
    mustMatch: false,//mustMatch表示必须匹配条目,也就是在文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
    matchContains: true,//表示包含匹配,也就是只要data数据里面有关键字就显示,不管它在什么位置,比如:google,omg;如果输入o,两个都显示
    scrollHeight: 220, //定高

    formatItem: function (data, i, total) {
    return '<I>'+data[0]+'</I>';
    },
    formatMatch: function (data, i, total) {
    return data[0];
    },
    formatResult: function (data) {
    return data[0];
    }

    });


    $('#username').autocomplete('Ajax/SearchAdminName.ashx', {
    minChars: 0,
    max: 5,
    mustMatch: false,
    matchContains: true,
    scrollHeight: 220,

    formatItem: function (data, i, total) {
    return '<I>'+data[0]+'</I>';
    },
    formatMatch: function (data, i, total) {
    return data[0];
    },
    formatResult: function (data) {
    return data[0];
    }

    });

    });

    </script>

    后面3个参数formatItem、formatMatch、formatResult非常有用,formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体,formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。

    这边写了两个校验,其实效果都一样,就显示一个看一下:

    SearchAdminCode.ashx

    <%@ WebHandler Language="C#" Class="SearchAdminCode" %>

    using System;
    using System.Web;
    using System.Collections.Generic;

    public class SearchAdminCode : IHttpHandler {

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

    string admincode = context.Request.QueryString["q"].ToString();

    Admin_Info ai = new Admin_Info();
    ai.Admin_code = admincode;

    List<Admin_Info> list = DLL.Admin_infoManager.GetAdminsBy(ai,null) as List<Admin_Info>;
    foreach (Admin_Info item in list)
    {
    context.Response.Write(item.Admin_code+"\n");
    }

    }

    public bool IsReusable {
    get {
    return false;
    }
    }

    }

    展示效果如下:

    如果上面看得还不是很明白,可以直接去http://www.pengoworks.com/workshop/jquery/autocomplete.htm

    这就原始demo,上面都有相应的需要下载的文件;说明什么的都很全,虽然是个简陋的外国站,但是都是比较简单的英文,看起来很轻松。



  • 相关阅读:
    sql server 的语句形式
    restful规范
    sql server 相对应的增删改查以及表的创建及修改
    简单介绍函数sorted
    简单介绍sql server
    Python中三种格式化输出的方式
    基于socket 数据传输的粘包问题
    Python socket 套接字实现通信
    Dapr-状态管理
    Dapr-服务调用
  • 原文地址:https://www.cnblogs.com/userbibi/p/omgee.html
Copyright © 2011-2022 走看看