使用jQuery提供的自动补全功能后台基于playframework
直接上代码:
User作为模型,存储数据
package models; import javax.persistence.Entity; import play.db.jpa.Model; @Entity public class User extends Model { public String username; public String fullName; public User(String username, String fullName) { super(); this.username = username; this.fullName = fullName; } }
控制器
package controllers; import play.*; import play.mvc.*; import java.util.*; import models.*; public class Application extends Controller { public static void index() { long count = User.count(); if(count == 0) { new User("张三","张三!").save(); }else if(count == 1) { new User("李四1","李四1!").save(); } else if(count == 2) { new User("李四2","李四2!").save(); } else if(count == 3){ new User("a","a!").save(); } List users = User.findAll(); render(users); } public static void users(String term) {//这里的参数名为term! //输入框中输入数据,到数据库进行模糊匹配 List users = User.find("upper(fullName) like upper(?)", term+"%").fetch(); //客户端拿到数据后,将数据作为提示信息显示,供用户参考 renderJSON(users); } }
main.html引入需要的脚本和样式文件
<!DOCTYPE html> <html> <head> <title>#{get 'title' /}</title> <meta charset="utf-8"> <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery-ui.css'}"> <script src="@{'/public/javascripts/jquery-1.9.1.js'}" type="text/javascript" charset="utf-8"></script> <script src="@{'/public/javascripts/jquery-ui.js'}" type="text/javascript" charset="utf-8"></script> </head> <body> #{doLayout /} </body> </html>
index.html
#{extends 'main.html' /} #{set title:'Home' /} <ul> #{list users, as:'user'} <li><b>${user.fullName}</b></li> #{/list} </ul> <input type="text" id="user" size="40"/> <script type="text/javascript"> $("#user").autocomplete({ source:function(request, response) { $.ajax({ url:"@{Application.users()}",//请求的action dataType:"json", //返回结果的类型 data:{ term:request.term //获取输入的值 }, success: function(data){//返回的结果为json数据,用data绑定 response( $.map(data, function(item){//从data中取出每一项,相当于每一个对象 return { label: item.fullName,//对象的属性,作为自动提示的数据进行显示 value: item.username//对象的属性,作为自动补全的结果 } }) ); } }); }, minLength:1, delay:500, autoFocus:true }); </script>
有图才有真相:
相关推荐
jquery.autocomplete.js 、jquery.autocomplete.css
jquery-autocomplete 可用
jquery.autocomplete的js+css 自动查询的显示的空控件,jquery.autocomplete.js和jquery.autocomplete.css文件
jquery.autocomplete 自动提示
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
利用jquery.autocomplete插件搜索并将查询出来的结果进行分页
智能联想框js,可以做到跟百度一样的在输入框输入内容就能出联想框的效果
jquery-autocomplete 自动完成插件
包含jquery.autocomplete相关js文档
jquery.autocomplete.min.js文本框的自动填充控件,jquery解决了跨浏览器问题。
不知道网上有没类似的,反正我是没找到,费了点劲自己写了个干净的demo,基于jquery.autocomplete 干净、完整、可靠
jquery-autocomplete 智能提示jquery-autocomplete 智能提示jquery-autocomplete 智能提示jquery-autocomplete 智能提示
jquery.autocomplete.js 参数属性介绍 [removed][removed]
jQuery:AutoComplete使用指南
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
jquery实现autocomplete插件(文本框下拉选项).zip
利用Jquery.AutoComplete插件及微软提供的ChineseConverter.dll实现汉字、拼音、简拼模糊搜索
1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...