JQuery之autocomplete结合ajax实现自动完成功能

autocomplete是jqueryui里的一个插件，作用类似于搜索时的自动提示功能。

显示效果请参考：http://jqueryui.com/autocomplete/

API文档请参考：http://api.jqueryui.com/autocomplete/

使用autocomplete时除了要引用jQuery和jQueryUI之外，还要引入jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js。

demo：

$('input[name=\'tag\']').autocomplete({
	delay: 500,
	source: function(request, response) {
            $.ajax({
                url: 'url',
                data: { tag:request.term }, //request.term是input输入框中的值
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item.tag
                        }
                    }));
                }
            });
	},
	select: function(event, ui) {
            $('input[name=\'tag\']').val(ui.item.label);

            return false;
	}
});

为了减少服务器的压力，我们设置缓存，不用每次都通过AJAX向服务器请求数据，代码如下：

var cache = {};
$('input[name=\'tag\']').autocomplete({
	delay: 500,
	source: function(request, response) {
            var term = request.term;
            if (term in cache) {
                response($.map(cache[ term ], function(item) {
                   return {
                        label: item.tag
                    }
                }));
                
                return false;
            }
            $.ajax({
                url: 'url',
                data: { tag:term },
                dataType: 'json',
                success: function(json) {
                    cache[ term ] = json;
                    response($.map(json, function(item) {
                        return {
                            label: item.tag
                        }
                    }));
                }
            });
	},
	select: function(event, ui) {
            $('input[name=\'tag\']').val(ui.item.label);

            return false;
	}
});