jQuery之autocomplete

schy_hqh

浏览: 555722 次
性别:

最近访客更多访客>>

amo

yjheeq

yclovesun

yangjiancsdn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端@jQuery

使用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>

有图才有真相：