jquery.autocomplete.js 两种实现方法

<script type="text/javascript">
    var v = 1;
    var stockInfoJson = [
        { "name": "深发展A", "code": "000001", "spell": "sfza", "count":"32435" },
        { "name": "万科A", "code": "000002", "spell": "wka", "count":"231" },
        { "name": "ST 国 农", "code": "000004", "spell": "stgn", "count":"4567" },
        { "name": "世纪星源", "code": "000005", "spell": "sjxy", "count":"2345" },
        { "name": "深振业A", "code": "000006", "spell": "szya", "count":"8799" },
        { "name": "ST 达 声", "code": "000007", "spell": "stds", "count":"12345234" },
        { "name": "ST宝利来", "code": "000008", "spell": "stbll", "count":"56235" },
        { "name": "中国宝安", "code": "000009", "spell": "zgba", "count":"9833" },
        { "name": "S ST华新", "code": "000010", "spell": "ssthx", "count":"24878" },
        { "name": "山航B", "code": "200152", "spell": "shb", "count":"32435" },
        { "name": "*ST帝贤B", "code": "200160", "spell": "stdxb", "count":"32435" },
        { "name": "雷伊B", "code": "200168", "spell": "lyb", "count":"32435" },
        { "name": "宝石B", "code": "200413", "spell": "bsb", "count":"32435" },
        { "name": "小天鹅B", "code": "200418", "spell": "xteb", "count":"32435" },
        { "name": "粤高速B", "code": "200429", "spell": "agsb", "count":"32435" },
        { "name": "宁通信B", "code": "200468", "spell": "ltxb", "count":"32435" },
        { "name": "晨鸣B", "code": "200488", "spell": "cmb", "count":"32435" },
        { "name": "珠江B", "code": "200505", "spell": "zjb", "count":"32435" },
        { "name": "闽灿坤B", "code": "200512", "spell": "mskb", "count":"32435" },
        { "name": "华电国际", "code": "600027", "spell": "hdgj", "count":"32435" }
    ];

        $(function () {
            /*
            $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "AjaxPage.aspx/GetAllHints",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            var datas = eval(‘(‘ + msg.d + ‘)‘);
            $("#keywords").autocomplete(
            datas,
            {
            minChars: 1,
            matchCase: false, //不区分大小写
            autoFill: false,
            max: 10,
            formatItem: function (row, i, max) {
            return "<table width=‘100%‘ border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘><tr><td align=‘left‘ height=‘24‘><b>" + row.name + "</b></td><td align=‘right‘><font style=‘color: #009933; font-family: 黑体; font-style: italic‘>约" + row.count + "个宝贝</font>&nbsp;&nbsp;</td></tr></table>";
            },
            formatMatch: function (row, i, max) {
            return row.name;
            },
            formatResult: function (row) {
            return row.name;
            },
            reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
            {
            //自定义在code或spell中匹配
            if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
            return row;
            }
            else {
            return false;
            }
            }
            }).result(function (event, data, formatted) {
            var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
            searchParams = "keyword=" + encodeKeyword;
            window.location.href = "http://localhost/products.aspx?" + searchParams;
            });
            }
            });
            */

            $("#keywords").autocomplete(
                "SearchHanle.ashx",
                {
                    minChars: 1,
                    matchCase: false, //不区分大小写
                    autoFill: false,
                    max: 10,
                    parse: function (data) {
                        var d = eval("(" + data + ")"); //此处要用eval函数;
                        var rows = new Array();
                        for (var i = 0; i < d.length; i++) {
                            rows[rows.length] = {
                                data: d[i],
                                value: d[i].code,
                                result: d[i].name
                            }
                        }
                        return rows;
                    },
                    formatItem: function (row, i, max) {
                        return "<table width=‘100%‘ border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘><tr><td align=‘left‘ height=‘24‘><b>" + row.name + "</b></td><td align=‘right‘><font style=‘color: #009933; font-family: 黑体; font-style: italic‘>约" + row.count + "个宝贝</font>&nbsp;&nbsp;</td></tr></table>";
                    },
                    formatMatch: function (row, i, max) {
                        return row.name;
                    },
                    formatResult: function (row) {
                        return row.name;
                    },
                    reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
                    {
                        //自定义在code或spell中匹配
                        if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
                            return row;
                        }
                        else {
                            return false;
                        }
                    }
                }).result(function (event, data, formatted) {
                    var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
                    searchParams = "keyword=" + encodeKeyword;
                    window.location.href = "http://localhost/products.aspx?" + searchParams;
                });
        });
</script>

先记一下,方法二是存在bug的。

时间: 2024-08-29 17:03:43

jquery.autocomplete.js 两种实现方法的相关文章

Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

JS两种声明函数的方法以及调用顺序

两种声明方法: 1. var a = function () {...}; 2. function a() {...}; 第一种方式必须先声明后调用,而第二种方式函数调用在声明之前之后都可以. //第一种方式 //a();这样调用会出错 var a = function () { alert("A"); } a();//A //第二种方式 b();//B function b() { alert("B"); } b();//B

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X

黑马程序员【两种Ajax方法】

两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技术已经被人们广泛应用,而对于一些对Web的了解还不是很深入的初学者,Ajax依然带着一层神秘的难懂的色彩,今天就在这里给大家以简单的方式解读一下Ajax的实现步骤和原理,并且给大家两种实现Ajax的方法,js和jquery. 首先ajax其实就是js+xml的技术,前端的表现就是一段js代码.要使用

angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

今天我们要讲的是ng2的路由系统. 例子 例子是官网的例子,包含一个“危机中心”和“英雄列表”,都在一个app中,通过路由来控制切换视图.还包含了promise的用法,服务的用法等多个知识点. 源代码: https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router 运行方法: 在根目录下运行: http-server 引入库文件设置base href 路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,

jquery.autocomplete.js 插件的自定义搜索规则

这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: var stockInfoJson = [ { name: "深发展A", code: "000001",spell:"sfza" }, { name: "万科A", code: "000002",spell

js两种定义函数、继承方式及区别

一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function() { alert("i am B"); } 区别:code 前者会在代码执行之前提前加载到作用域中,后者则是在代码执行到那一行的时候才会有定义 二:js两种继承方式及区别 对象冒充 临时属性 call() apply() 原型链 code 继承应选哪种 code 三:实例 js两种定义

c#+jquery.autocomplete.js

html代码: $(document).ready(function () { $.ajax({ type: "POST", contentType: "json", url: "a.ashx?action=findlist", data: "{}", dataType: "html", success: function (data) { var dataset = eval('(' + data + '