jQuery之autocomplete

最新推荐文章于 2024-12-12 13:03:12 发布

schy_hqh

最新推荐文章于 2024-12-12 13:03:12 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端@jQuery 文章标签： javascript json 数据库 ViewUI

本文链接：https://blog.youkuaiyun.com/schy_hqh/article/details/84493086

WEB前端@jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用jQuery的自动补全功能，结合Play Framework进行后台开发，实现用户输入时的实时数据匹配与展示。通过具体代码实例，展示了如何创建模型、控制器以及在网页中集成自动补全组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

有图才有真相：