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;

            }

        }

    }

}

jQuery打造智能提示插件

时间： 2024-10-13 22:33:27

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

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

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

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

Eclipse支持HTML&JSExtJS&jQuery代码智能提示 安装HTML插件GEF和EclipseHTMLEditor 一. GEF下载安装 进到网页http://www.eclipse.org/gef/downloads/ 点6.2M的那个.会进入下载页面http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201201171043/GEF-ALL-3.7.2.z

jquery的智能提示控件

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

一个基于jquery的智能提示控件intellSeach.js

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

福利到~分享一个基于jquery的智能提示控件intellSeach.js

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

vs code 添加jquery的智能提示

1.安装node.js 2.新建VCodeTestApp文件夹,用vs code打开这个文件夹 3.打开cmd,进入TestApp文件夹所在盘符,然后cd进入TestApp C:\Users\Administrator>e: E:\>cd VsCodeTestApp 4.通过NPM安装Typings (cmd输入下面命令,下同) E:\VsCodeTestApp>npm install -g typings 5.安装相关提示信息文件(这里以jquery为例) E:\VsCodeTestA

SQL Prompt——SQL智能提示插件

数据库是大家在项目开发中肯定会用到的,C#项目用的最多的就是微软自家的SQL Server了.不可否认,微软的Visual Studio开发平台很好用,很直观的体现就是智能提示.敲几个字符,相关的信息就列出来了,很方便.如果改成用记事本写一段代码,肯定没人愿意,因为大家已经习惯了智能提示.然而微软在数据库的IDE方面却做得并不理想,直到SQL2008才加入了并不算强大的智能提示.目前普遍使用的还是SQL2005,编写代码的时候只能一个个字段敲出来,这种滋味可不好受.即使想偷懒,也只能是从之前的代

Python | 安装和配置智能提示插件Anaconda （转）

作为Python开发环境的Sublime Text 3,有了Anaconda就会如虎添翼.Anaconda是目前最流行也是最有威力的Python代码提示插件. 工具/原料 Sublime Text 3 build3103 插件安装 1 我们使用Sublime Text插件安装工具package control来安装,怎么安装package control这个插件大家参考下面的应用文章 4Sublime Text 3 怎么安装插件 2 好,现在打开package control菜单,输入insta

jQuery - toastr消息提示插件（取代alter()）

toastr插件详细参考资料 项目地址:https://github.com/CodeSeven/toastr 使用方法 (1)添加引用 <!-- 消息提示 --> <link href="/assets/JS/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" /> <!--消息提示--> <script t