jQuery-Autocomplete插件使用总结

需求:实现类似于百度搜索的提示效果,即可以通过关键字筛选下拉列表中的选项

 layui和iview中都有现成的Autocomplete插件,但是需要集成layui和iview相关的依赖,我就是想在一个简单的业务环境中实现这个功能,而且在系统的业务框架中也没有集成相关的环境,所以采用这种方式性价比很低。

在网上搜索到了使用jQuery进行集成的案例,自己研究了一下,原栗子中的注释说明不是很清楚,对于类似我这样之前未了解过和没有研究过jQuery的Autocomplete组件的人来说不是很容易弄懂。废话不多说,先贴上效果图:

 

上面的截图是其中的一个示例,我在项目中做集成就用了这个示例。可以实现ajax实时获取和固定的源数组中筛选取值。下面我会分别贴一下两种示例的代码:

第一种:采用源数组的方式

    var countries = {
        "AD": "Andorra",
        "A2": "Andorra Test",
        "AE": "United Arab Emirates",
        "AF": "Afghanistan",
        "AG": "Antigua and Barbuda"
        }
    var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });
    $('#autocomplete-ajax').autocomplete({
        lookup: countriesArray,   // 如果写了这个属性,则说明是使用固定的数组数据,即便同时有了serviceUrl属性也不会生效
        lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
            var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });

第二种:ajax实时获取的方式

    var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });

    //jQuery ajax mock,模拟后台处理发送过来的请求
    $.mockjax({
        url: '*',
        responseTime: 2000,
        response: function (settings) {
            var query = settings.data.query,
                queryLowerCase = query.toLowerCase(),
                re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
                suggestions = $.grep(countriesArray, function (country) {
                     // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
                    return re.test(country.value);
                }),
                response = { // 注意返回格式必须为这个格式
                    query: query,
                    suggestions: suggestions
                };

            this.responseText = JSON.stringify(response);
        }
    });
    // Initialize ajax autocomplete:
    $('#autocomplete-ajax').autocomplete({
        serviceUrl: '/autosuggest/service/url',
        // lookup: countriesArray, // 这个必须注释掉,否则会采用属性中的countriesArray数组而不走serviceUrl中的ajax请求
        lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
            var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });

采用这种方式有几点需要注意:

  1. 在使用serviceUrl时,lookup属性必须注释掉;
  2. serviceUrl属性中配置的是后台的真实请求路径,上述配置是为了使用mockjax进行模拟后台处理,上述对应的mockjax代码不需要体现在程序中;
  3. 后台返回数据的格式必须严格按照:{"query": query,"suggestions": suggestions},suggestions为被筛选出来的数据,里面具体格式自己调试一下就明白了;

下面贴一下我自己的具体代码:


$(function () {
    'use strict';

    // Initialize ajax autocomplete:
    $('#autocomplete-ajax').autocomplete({
        serviceUrl: 'http://127.0.0.1/test/autosuggest/userInfo/4028805e6d5e3155016d637627d80157',
        lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
            var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });
    
});

最后:

 欢迎大家和我交流学习;由于这篇文章为事后写的,所以当时具体看了哪位大神的代码已经记不住了,源码也得下来网站为:www.jq22.com,具体使用的案例也已经找不到了,下面的为我之前下载的源码链接,可以免费下载,如果有侵权请联系删除。

注意:

1. 在使用ajax动态请求的时候,插件会向后台传递一个query参数:我使用的@RequestParam(name = "query", required = false) String query去接受;

2.在使用ajax动态请求的时候,返回的格式是固定格式的,并且返回属性的命名最好也不要去修改。返回格式代码如下

@Getter
@Setter
@ToString
public class Result1 implements Serializable {

	@ApiModelProperty("查询条件")
	private String query;
	
	@ApiModelProperty("返回结果")
	private List<Result12> suggestions;
}

@Getter
@Setter
@ToString
public class Result12 implements Serializable {

	@ApiModelProperty("名称")
	private String value;
	
	@ApiModelProperty("键值")
	private String data;
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值