JQuery Autocomplete实战

废话不多说,先看效果!~

需要引入的资源如下

<link rel="stylesheet" href="/css/jquery.autocomplete.css" type="text/css">
<script type="text/javascript" src="/lib/jquery.min.js"></script><!--1.8.3-->
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>

前端代码

<div class="control-group span6">
<label class="control-label">客户名</label>
<div class="controls">
    <input type="text" id="q-customerName" name="customerName" class="form_value ac_input" autocomplete="off">
    <input type="hidden" id="q-customerId" name="customerId" class="form_value" validate="n" value="0"><!-- 默认值为0 -->
</div>
</div>

Javascipt代码

$("#q-customerName").autocomplete("/CustomerName/getCustomerNameSuggestion.do",{
max:10,//最多5条记录
minChars:1,
scrollHeight: 250,
width:206,
dataType:‘json‘,//返回的数据类型为JSON类型
extraParams: {
    "customerName": function () {
	return encodeURIComponent($("#q-customerName").val());
    }
},
parse:function(data) {//解释返回的数据,把其存在数组里
    var parsed = [];
    for (var i = 0; i < data.length; i++) {
	parsed[parsed.length] = {
	    data: data[i],
	    key: data[i].key,
	    value: data[i].value,
	    result: data[i].value //返回的结果显示内容
	};
    }
    if (data.length == 0) {
	parsed.push({
	    data: {
		"key": "0",
		"value": "无搜索结果"
	    },
	    key: "0",
	    result: "无搜索结果"
	});
    }
    return parsed;
},
formatItem: function(item) {//显示下拉列表的内容
    return item.value;
},
formatMatch: function(item) {
    return item.value;
},
formatResult: function(item) {
    return item.value;
}
}).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上
$("#q-customerId").val(item.key);
if(item.key == 0){
    $("#q-customerName").val("");
}
});

后端返回的json数据格式如下

[
    {
        "key": "5133",
        "value": "上海**有限公司"
    },
    {
        "key": "5197",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5202",
        "value": "上海**传播有限公司"
    },
    {
        "key": "5234",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5319",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5402",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5500",
        "value": "上海**有限公司"
    },
    {
        "key": "5581",
        "value": "上海**用品有限公司"
    }
]

Firefox下有个小bug,使用搜狗输入法输入中文时不触发antocomplete事件。正在解决。

测试发现JQuery1.9及以上不兼容,项目中使用的是1.8.3

这东西没啥技术含量,就是麻烦,记录一下避免以后在同样的问题上浪费时间。

时间: 2024-10-26 01:58:56

JQuery Autocomplete实战的相关文章

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 + '

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar

JQuery+Ajax实战三级下拉列表联动(八)

本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构I

Jquery AutoComplete的使用方法实例

jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表. 2) width (Number) 指定下拉框的宽度,Default: input元素的宽度 3) m

jquery Autocomplete函数

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0

【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQuery AutoComplete组件,需要引用: [1].jquery.js [2].jquery-ui.js [3].jquery.ui.autocomplete.css 然后这样使用即可: var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item

一场由股票提醒助手插件引发的血案——浅入浅出 jquery autocomplete

我没有学过前端,所以这篇文章注定要班门弄斧了. 通常,需要用到什么技术什么语言时,我才去学,学了也不一定掌握,就是记不住!所以现在明白了,学习的时候,亦或是攻克难点的时候,一定要记录下来,并不一定非要呈现什么高大上的技术,但求复原自己的心路历程足以. 大家都知道,最近股市很火爆,当然这几天正在调整期呵呵,神车复牌都交出一天涨停一天跌停的答卷自降为灵车,相比于528垂直过山车,见怪不怪了.很多人虽然没投入大量精力炒股,但还是时刻关注着股市行情,上班族们总不能时刻盯着手机看吧,所以我就想到了股票插件

JQuery AutoComplete搜索智能提示

首先需要引入的文件有: jquery-ui-1.10.4.custom.min.cssjquery-ui-1.10.4.custom.min.js 然后在后台组织json格式的数据,组织成一个list型数据String id;String label;String value; 如: var availableTagsJSON = [ { label: "C#", value: "C#", id: "1" }, { label: "C+

jquery.autocomplete 自动补全 应用

下拉自动补全的js控件还是很多的,不过好多都被集成在N多组件之一了,像Jquery.easyui,jquery.chonsen等等都可以实现类似的功能.但我想要的是是一款简单轻巧,应用于整个系统的js. 于是我选择了jquery.autocomplete.js,基本参数注解参考:http://www.cnblogs.com/EWall/archive/2011/04/28/2031613.html,JS及相关CSS可在google code下载,链接https://code.google.com