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);
};
上一篇: 珍爱生命远离ligerui
推荐阅读
-
Vue Autocomplete 自动完成功能简单示例
-
jQuery-ui插件sortable实现*拖动排序
-
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
-
AutoComplete:iexplore.exe 应用程序错误
-
autocomplete禁止自动完成功能
-
在Vue项目中引入JQuery-ui插件的讲解
-
在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?
-
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
-
jQuery UI Autocomplete 体验分享
-
Vue Autocomplete 自动完成功能简单示例