欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jquery-ui autocomplete

程序员文章站 2022-06-07 17:17:59
...

最近公司在公司接到一个临时性的修改公司管理系统任务,这个系统是使用JFinal进行开发的,JFinal可是我从来就没有接触过的东西啊,只是以前听说的,开发效率挺高的一个框架。好像有点偏题了啊,我明明写的是Jquery-ui  autocomplete。言归正传Jquery-ui  autocomplete也是我在这个项目中使用的。

以前总是使用自己封装的今天遇到Jquery-ui  autocomplete,觉得这挺好用的,然后把自己在项目中的使用记录一下。

使用Jquery-ui  autocomplete首先你的页面中需要一个html的input输入框吧!

<input id="inputText" type="text" name="name" />

系统的后台返回一个json数组

[{"name":"name111111", "type":"type111111", "value":"111111"},
    {"name":"name222222", "type":"type222222", "value":"222222"},
    {"name":"name333333", "type":"type333333", "value":"333333"}
]

在页面中我们通过绑定事件,将输入框绑定自动填充事件。

$('#inputText').autocomplete({
    source : function(){
        $.ajax(
            url:'自己的URL路径',
            dataType: 'json',
            data:{
                "请求参数": request.term//这是在input中输入的参数
            },
            success : function(data){
                response(data);//这里是你需要处理的数据,在这里可以对不需要的数据进行二次过滤
            }
        );
    },
    minLength : 1,
    autoFocus : true,
    select : function(event, ui){
        用户点击后的操作
        return false;//这需要返回false,否则选中的信息无效
    }
}).autocomplete("instance")
._renderItem = function(ul, item){
    return $('<li>').append(item.type+"---"+item.name).appendTo(ul);
};

 

相关标签: jquery autocomplete