jQuery打造智能提示插件

插件根据实际需要在单功能上封装的，实现传入后台数据地址，要保存值的input,前台要传入的参数（过滤条件），来返回下拉提示数据，数据过多可上下滚动选择，选择后显示文本与对应的值，供后台操作，如图：

js封装：

/*
/// <reference path="jquery-autocomplete2.0.js" />
zhangs
20140516
*/
(function($) {

    $.fn.combox = function(options) {
        var KEY = {
            UP: 38,
            DOWN: 40,
            DEL: 46,
            TAB: 9,
            RETURN: 13, //回车
            ESC: 27,
            COMMA: 188,
            PAGEUP: 33,
            PAGEDOWN: 34,
            BACKSPACE: 8
        };

        //默认属性
        var defaults = {
            hidvalueid: "combox_hid_value", //保存选中元素值的input的ID
            boxwidth: "150px", //文本框宽度
            url: "", //提交的页面/方法名，URL ="AsynHandler.ashx?ywtype=GetUserNameList"
            param: null//要发送到服务端参数格式，主要是要动态取值的参数：[{ keyname: "catalog", keyvalue: "txtCata" }, { keyname: "cba", keyvalue: "txtCata2"},……]
        };
        var options = $.extend(defaults, options); //将传入的参数进行合并
        var hidvalue = $("#" + defaults.hidvalueid); //选中的值

        //实现功能
        return this.each(function() {
            var cb = $(this); //输入框<div id="searchresult" style="display: none;"/>
            cb.width(defaults.boxwidth);
            var id = cb.attr("id");
            var searchresultdiv = $("<div id='" + id + "_searchresult' style='display: none;' />").insertAfter(cb);
            searchresultdiv.addClass("searchresult").width(defaults.boxwidth);

            var strTmp = "";
            if (defaults.url.indexOf("?") == -1) {
                strTmp += "?";
            } else {
                strTmp += "&";
            }

            cb.keyup(function(evt) {
                changeCoords(); //控制查询结果div坐标
                var k = window.event ? evt.keyCode : evt.which;
                //输入框的id为txt_search，这里监听输入框的keyup事件
                //不为空 && 不为上箭头或下箭头或回车
                if (cb.val() != "" && k != KEY.UP && k != KEY.DOWN && k != KEY.RETURN) {
                    var strTmp2 = "";
                    //拼接传入的参数
                    if (defaults.param != null) {
                        $.each(defaults.param, function(i, item) {
                            if (typeof item.keyvalue != "string") {
                                alert("控件参数格式有错误，请检查");
                                return;
                            }
                            var value = $("#" + item.keyvalue).val();
                            if (value != "" || value != null) {
                                strTmp2 += item.keyname + "=" + escape(value) + "&";
                            }
                        });

                    }

                    var sUrl = defaults.url + strTmp + strTmp2 + "key=" + escape(cb.val()) + "&rdnum=" + Math.random();
                    $.ajax({
                        type: 'GET',
                        async: false, //同步执行，不然会有问题
                        dataType: "json",
                        url: sUrl,   //提交的页面/方法名
                        //data: ,              //参数（如果没有参数：null）
                        contentType: "application/json; charset=utf-8",
                        error: function(msg) {//请求失败处理函数
                            alert("数据加载失败");
                        },
                        success: function(data) { //请求成功后处理函数。
                            showlist(data);
                        }
                    });
                }
                else if (k == KEY.UP) {//上箭头
                    $('#' + id + '_combox_table tr.combox-hover').prev().addClass("combox-hover").width(defaults.boxwidth);
                    $('#' + id + '_combox_table tr.combox-hover').next().removeClass("combox-hover");
                    var tr_box_hover = $('#' + id + '_combox_table tr.combox-hover');
                    if (tr_box_hover.position() != undefined) {
                        if (tr_box_hover.position().top < 0) {
                            //向上滚动遮住的部分+本身的高度+padding高度
                            searchresultdiv.scrollTop(searchresultdiv.scrollTop() - (tr_box_hover.height() - tr_box_hover.position().top + 4));
                        }
                        cb.val($('#' + id + '_combox_table tr.combox-hover').text());
                        hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
                    }
                } else if (k == KEY.DOWN) {//下箭头
                    if ($('#' + id + '_combox_table tr.combox-hover').size() == 0) {
                        $(".combox-line:first").addClass("combox-hover").width(defaults.boxwidth); //若无选中的，则选中第一个
                    } else {
                        $('#' + id + '_combox_table tr.combox-hover').next().addClass("combox-hover").width(defaults.boxwidth);
                        $('#' + id + '_combox_table tr.combox-hover').prev().removeClass("combox-hover");
                        var tr_box_hover = $('#' + id + '_combox_table tr.combox-hover');
                        if (tr_box_hover.position().top + tr_box_hover.height() > searchresultdiv.height()) {
                            //向下滚动遮住的部分+本身高度+padding高度
                            searchresultdiv.scrollTop(searchresultdiv.scrollTop() + tr_box_hover.height() + (tr_box_hover.position().top + tr_box_hover.height()) - searchresultdiv.height() + 4);
                        }
                    }
                    cb.val($('#' + id + '_combox_table tr.combox-hover').text());
                    hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
                }
                else if (k == KEY.RETURN) {//回车
                    if ($('#' + id + '_combox_table tr.combox-hover').text() != "") {
                        cb.val($('#' + id + '_combox_table tr.combox-hover').text());
                        hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
                    }
                    searchresultdiv.empty();
                    searchresultdiv.css("display", "none");
                }
                else {
                    searchresultdiv.empty();
                    hidvalue.val(""); //为空时，值也为空
                    searchresultdiv.css("display", "none");
                }
            });
            searchresultdiv.bind("mouseleave", function() {
                searchresultdiv.empty();
                searchresultdiv.css("display", "none");
            });

            //根据data生成下拉列表
            function showlist(data) {
                if (data == "false") {
                    return;
                }
                if (data.length > 0) {
                    var layer = "";
                    layer = "<table id='" + id + "_combox_table'>";
                    $.each(data, function(idx, item) {
                        layer += "<tr class='combox-line' style='width:" + defaults.boxwidth + "'><td style='width:" + defaults.boxwidth + "' value='" + item.Value + "'>" + item.Name + "</td></tr>";
                    });
                    layer += "</table>";

                    //将结果添加到div中
                    searchresultdiv.empty();
                    searchresultdiv.append(layer);
                    //$(".combox-line:first").addClass("combox-hover"); //初始化时不能显示，此时回车不会选中第一个
                    searchresultdiv.css("display", "");
                    //鼠标移动事件
                    $(".combox-line").hover(function() {
                        $(".combox-line").removeClass("combox-hover");
                        $(this).addClass("combox-hover").width(defaults.boxwidth);
                    }, function() {
                        $(this).removeClass("combox-hover");
                        //searchresultdiv.css("display", "none");
                    });
                    //鼠标点击事件
                    $(".combox-line").click(function() {
                        cb.val($(this).text());
                        hidvalue.val($(this).children()[0].value);
                        searchresultdiv.css("display", "none");
                    });
                } else {
                    searchresultdiv.empty();
                    searchresultdiv.css("display", "none");
                }
            }

            //设置查询结果div坐标
            function changeCoords() {
                var left = cb.position().left; //获取距离最左端的距离，像素，整型
                var top = cb.position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
                searchresultdiv.css("left", left + "px"); //重新定义CSS属性
                searchresultdiv.css("top", top + "px"); //同上
            }
            return cb;
        });

    };
})(jQuery);

对应css

 .searchresult
        {
            max-height:200px;
            position: absolute;
            z-index: 1;
            overflow: auto;
            left: 130px;
            top: 71px;
            background: #E0E0E0;
            border-top: none;
        }
        .combox-line
        {
            font-size: 12px;
            background: #E0E0E0;
            padding: 2px;
        }
        .combox-hover
        {
            background: #007ab8;
            color: #fff;
        }

前台引用这两个文件后调用，这里要注意的是param参数，如果有其它控件要控制此提示框内容过滤条件，则将对应名与控件id传入，如下类别名catalog，对应txtCata控件，多个可按此格式传入，后台会通过context.Request["catalog"]取到txtCata的值，若有文本作为过滤条件，直接拼接在url中：

 <link href="style/jquery-autocomplete2.0.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-autocomplete2.0.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function() {

             var strurl = "AsynHandler.ashx?ywtype=GetUserNameList";
             $("#txt_search").combox({ hidvalueid: "hidselvalue",boxwidth:"150px", url: strurl, param: [{ keyname: "catalog", keyvalue: "txtCata" }, { keyname: "cba", keyvalue: "txtCata1"}] });
             $("#form1").keydown(function() {
                 //防止选中后回车提交表单
                 return (event.keyCode != 13);
             });
         });
    </script>

form表单：

<form id="form1" runat="server">
    <div style="width:300px">
    智能模糊查询提示
        <input id="txt_search" type="text" runat="server" />
        <input id="hidselvalue" type="hidden" runat="server" />
    </div>
    </form>

其中txt_search为要显示内容的input，hidselvalue为要保存选中值，在后台可用hidselvalue.Value来取得（因为要在后台取值，所以没有封装进去，主要用于NET后台）

异步页面AsynHandler.ashx：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
using System.Data;

namespace WebApp
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class AsynHandler : IHttpHandler
    {
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        /// <summary>
        /// post方法接收数据
        /// </summary>
        /// <param name="context">HttpContext</param>
        public string getPostStr(HttpContext context)
        {
            Int32 intLen = Convert.ToInt32(context.Request.InputStream.Length);
            byte[] b = new byte[intLen];
            context.Request.InputStream.Read(b, 0, intLen);
            return System.Text.Encoding.UTF8.GetString(b);
        }

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string ywtype = context.Request["ywtype"];
            string strReturn = String.Empty; //返回值
            switch (ywtype)
            {
                case "GetUserNameList":
                    strReturn = GetUserNameList(context);
                    break;
                default:
                    strReturn = "false";
                    break;
            }

            context.Response.Write(strReturn);
        }

        private string GetUserNameList(HttpContext context)
        {
            StringBuilder returnStr = new StringBuilder();
            string userName = context.Request["key"];
            userName = HttpUtility.UrlDecode(userName);
            List<ConboxItem> conboxlist = new List<ConboxItem>();
            ConboxItem item = new ConboxItem("政治", "zz");
            conboxlist.Add(item);
            item = new ConboxItem("acb", "zz");
            conboxlist.Add(item);
            item = new ConboxItem("语言", "yy");
            conboxlist.Add(item);
            item = new ConboxItem("三个", "sg");
            conboxlist.Add(item);
            item = new ConboxItem("数据", "sj");
            conboxlist.Add(item);
            item = new ConboxItem("英文", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("a", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("acb1", "zz1");
            conboxlist.Add(item);
            item = new ConboxItem("a", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("acb1", "zz1");
            conboxlist.Add(item);
            item = new ConboxItem("a", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("acb1", "zz1");
            conboxlist.Add(item);
            item = new ConboxItem("a", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("acb1", "zz1");
            conboxlist.Add(item);
            item = new ConboxItem("a", "yw");
            conboxlist.Add(item);
            item = new ConboxItem("acb1", "zz1");
            conboxlist.Add(item);
            item = new ConboxItem("语言1", "yy1");
            conboxlist.Add(item);
            item = new ConboxItem("三个1", "sg1");
            conboxlist.Add(item);
            item = new ConboxItem("数据1", "sj1");
            conboxlist.Add(item);
            item = new ConboxItem("英文1", "yw2");
            conboxlist.Add(item);
            item = new ConboxItem("a1", "yw1");
            conboxlist.Add(item);

            List<ConboxItem> resultlist = conboxlist.Where(p => p.Name.Contains(userName)).ToList();

            if (resultlist.Count > 0)
            {
                returnStr.Append(ToJson(resultlist));
                return returnStr.ToString();
            }
            else
            {
                item = new ConboxItem("未查询到记录！", "");
                resultlist.Add(item);
                return ToJson(resultlist);
            }

        }

        #region List转换成Json格式
        /// <summary>
        /// List转换成Json格式
        /// </summary>
        /// <param name="dt"></param>
        /// <returns></returns>
        public static string ToJson(List<ConboxItem> conboxlist)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            jsonBuilder.Append("[");
            for (int i = 0; i < conboxlist.Count; i++)
            {
                jsonBuilder.Append("{");

                jsonBuilder.Append("\"");
                jsonBuilder.Append("Name");
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(conboxlist[i].Name);
                jsonBuilder.Append("\",");

                jsonBuilder.Append("\"");
                jsonBuilder.Append("Value");
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(conboxlist[i].Value);
                jsonBuilder.Append("\",");

                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            return jsonBuilder.ToString();
        }
        #endregion
        #region dataTable转换成Json格式
        /// <summary>
        /// dataTable转换成Json格式
        /// </summary>
        /// <param name="dt"></param>
        /// <returns></returns>
        public static string ToJson(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            jsonBuilder.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            return jsonBuilder.ToString();
        }
        #endregion

        public class ConboxItem
        {
            public string Name { get; set; }
            public string Value { get; set; }
            public ConboxItem(string Name, string Value)
            {
                this.Name = Name;
                this.Value = Value;
            }
        }
    }
}

 

时间： 2024-10-30 15:46:16

jQuery打造智能提示插件的相关文章

jQuery打造智能提示插件二（可编辑下拉框）

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px:   /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { var KEY = { UP: 38, DOWN: 40, DEL: 46, TAB: 9, RETURN:

自制基于jQuery的智能提示插件一枚_jquery

目前实现如下功能: 1 最基本需求,根据当前文本框字符取出适配数据  1.1 支持同一页面多个元素调用本插件  1.2 必需的参数是url  1.3 对于连续不断地输入,会把之前的ajax请求全部取消,避免造成服务器无谓的压力(图4)  1.4 最基本调用$("myel").autoCmpt({url:"url"});2 空关键词查询开关(emptyRequest),打开则鼠标点在输入框内即出现提示(当下拉列表用),默认为true(图1)3 支持关联查询,即当前文本

基于jQuery的消息提示插件之旅 DivAlert(三)_jquery

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

易操作的jQuery表单提示插件_jquery

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法引入核心文件 <script src="js/jquery/2.1.1/jquery.min.j

Eclipse支持HTML&amp;JS&amp;ExtJS&amp;jQuery代码智能提示

  Eclipse支持HTML&JS&ExtJS&jQuery代码智能提示  参考地址: http://wenku.baidu.com/view/cfd23806a6c30c2259019ed0.html

基于jQuery的消息提示插件 DivAlert之旅（二）_jquery

改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api_jquery

例如:1.0 => 1.0.0:1.1 => 1.1.0 1.增加jQuery版本提示: 2.增加event事件智能提示: 3.增加delegate和undelegate 智能提示 delegate('', 或undelegate('', 4.增加延迟对象智能提示Deferred()/deferred 5.增加了两个Beta版本 API link和unlink 6.xml文件中使用多个menugroup分组便于后期维护 -------------------------------------

基于jquery实现智能提示控件intellSeach.js_jquery

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入"李",系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友

jquery poshytip消息提示插件使用

今天分享一个简单易用的消息提示插件:poshytip.这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框. demo效果图:   配置参数:     类型(时间单位为毫秒) 示例 content 显示的内容(缺省取值title) String, DOM element, Function, jQuery $('#demo').poshytip({ content: 'Hey, t