当前位置: 首页 > Web前端 > HTML

使用juqery-ui完成预测查询功能

时间:2023-04-02 18:07:18 HTML

最近公司项目有个需求,需要使用预测查询功能。它是一个文本输入框。输入的时候取值去后台模糊查询,然后按照列表显示在下面。效果如下图:搜索找到这个插件后,可以通过查阅资料完成这个功能,即可以实现静态数据,也可以完成动态抓取和展示。使用方法如下:(1)导入jquery-ui文件,当然还有jquery文件(2)定义一个input标签导入代码:html标签代码然后通过ajax动态请求后台数据如下:$("#xxx").autocomplete({来源:函数(请求,响应){$.ajax({url:'',类型:“POST”,数据类型:“json”,数据:{},成功:函数(数据){that.lineData=data;响应(数据);}});},minLength:1,scrollHeight:1000,autoFocus:true});后台返回的数据类型为json数组格式。至此静态和动态数据展示已经完成。当然,为了满足自己的项目,必须进行相应的修改样式修改的样式代码如下:好了,结束