autoComplete自动提交



autoComplete自动提交

<%@ page language=”java” pageEncoding=”UTF-8″%>
<%@ page contentType=”text/html; charset=UTF-8″%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=”fmt” uri=”http://java.sun.com/jsp/jstl/fmt” %>
<%@ taglib prefix=”fn” uri=”http://java.sun.com/jsp/jstl/functions” %>
<%@ page isELIgnored=”false” %>
<fmt:requestEncoding value=”UTF-8″/>
<c:set var=”ctx” value=”${pageContext.request.contextPath}”/>
<c:set var=”requestURI” value=”${pageContext.request.servletPath}”/>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>sou suo lecense</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<link rel=”stylesheet” type=”text/css” href=”${ctx}/js/jquery/ui/css/jquery.ui.all.css” />
<span style=”color: #00d600;”><%–<link rel=”stylesheet” type=”text/css” href=”${ctx}/css/demos.css” />–%></span>

<script type=”text/javascript” src=”${ctx}/js/jquery/jquery-1.7.2.js”></script>
<script type=”text/javascript” src=”${ctx}/js/jquery/ui/jquery.ui.core.js”></script>
<script type=”text/javascript” src=”${ctx}/js/jquery/ui/jquery.ui.widget.js”></script>
<script type=”text/javascript” src=”${ctx}/js/jquery/ui/jquery.ui.position.js”></script>
<script type=”text/javascript” src=”${ctx}/js/jquery/ui/jquery.ui.autocomplete.js”></script>
<script type=”text/javascript” src=”${ctx}/js/jquery/json2.js”></script>

<style type=”text/css”>
.ui-autocomplete {
max-width: 151px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
}

<span style=”color: #00c400;”> </span>
* html .ui-autocomplete {
height: 100px;
}

.ui-autocomplete-loading { background: white url(‘images/ui-anim_basic_16x16.gif’) right center no-repeat; }
#city { width: 25em; }
</style>
<script type=”text/javascript”>
jQuery(document).ready(function(){

<span style=”color: #009400;”>//</span><span style=”color: #ff6600;”>下面是简单的数组模式的数据格式</span><span style=”color: #009400;”>
// var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"," 我们","我爱我家","我是优派","shihuan","anjie","唯我独尊"];
// $(“#mylike”).autocomplete({
// source: availableTags
// });

//</span><span style=”color: #ff6600;”>下面是带有分类的数组模式的数据格式</span><span style=”color: #009400;”>
// $.widget( “custom.catcomplete”, $.ui.autocomplete, {
// _renderMenu: function( ul, items ) {
// var self = this,
// currentCategory = “”;
// $.each( items, function( index, item ) {
// if ( item.category != currentCategory ) {
// ul.append( “<li class=’ui-autocomplete-category’>” + item.category + “</li>” );
// currentCategory = item.category;
// }
// self._renderItem( ul, item );
// });
// }
// });
//
// var data = [
// { label: "anders", category: "" },
// { label: "andreas", category: "" },
// { label: "antal", category: "" },
// { label: "annhhx10", category: "Products" },
// { label: "annk K12", category: "Products" },
// { label: "annttop C13", category: "Products" },
// { label: "anders andersson", category: "People" },
// { label: "andreas andersson", category: "People" },
// { label: "andreas johnson", category: "People" }
// ];
//
// var data1 = [
// { label: "anders", category: "" },
// { label: "andreas", category: "" },
// { label: "antal", category: "" },
// { label: "annhhx10", category: "" },
// { label: "annk K12", category: "" },
// { label: "annttop C13", category: "" },
// { label: "anders andersson", category: "" },
// { label: "andreas andersson", category: "" },
// { label: "andreas johnson", category: "" }
// ];
//
// $(“#search”).catcomplete({
// delay: 0,
// source: data1
// });

//</</span>span><</span>span style=”color: #ff6600;”>下面是JSON数据类型的数据格式</</span>span>
function log(message) {
$(“<</span>div/>”).text(message).prependTo(“#log”);
$(“#log”).scrollTop(0);
}
$(“#city”).autocomplete({
source: function(request, response) {
$.ajax({
url: “user/manage/queryjsondata.do”,
dataType: “json”,
data: {<</span>span style=”color: #0000ff;”>myparam</</span>span>: “myp”, <</span>span style=”color: #0000ff;”>mynum</</span>span>: 12, <</span>span style=”color: #0000ff;”>name_startsWith</</span>span>: <</span>span style=”color: #ff0000;”>request.term</</span>span>}, <</span>span style=”color: #0bca54;”>//传递给后台请求的参数</</span>span>
success: function(data) {
response( $.map(data, function(item) {
return {
<</span>span style=”color: #0bca54;”>//label: item.uid + (item.displayname ? “, ” + item.displayname : “”) + “, ” + item.mail,</</span>span>
label: item.uid, <</span>span style=”color: #0bca54;”>//显示在匹配下拉框的内容</</span>span>
mytext: item.mail, <</span>span style=”color: #0bca54;”>//可以自定义，用来赋值给其他input框或div域</</span>span>
value: item.displayname <</span>span style=”color: #0bca54;”>//是返回值属性</</span>span>
}
}));
}
});
},
minLength: 2, <</span>span style=”color: #0bca54;”>//至少输入几个字符的时候开始匹配</</span>span>
select: function(event, ui) { <</span>span style=”color: #0bca54;”>//选中失去焦点后触发的事件</</span>span>
<</span>span style=”color: #0bca54;”>//log(ui.item ? “Selected: ” + ui.item.label : “Nothing selected, input was ” + this.value);</</span>span>
log(ui.item ? “Selected: ” + ui.item.mytext : “Nothing selected, input was ” + this.value);
$(“#citycode”).val(ui.item.value);
<</span>span style=”color: #0bca54;”>//$(“#log”).html(this.value);</</span>span>
},
open: function() { <</span>span style=”color: #0bca54;”>//在下拉框被显示的时候触发</</span>span>
$(this).removeClass(“ui-corner-all”).addClass(“ui-corner-top”);
},
close: function() { <</span>span style=”color: #0bca54;”>//在下拉框被隐藏的时候触发</</span>span>
$(this).removeClass(“ui-corner-top”).addClass(“ui-corner-all”);
}
});

});

<</span>span style=”color: #0bca54;”></</span>span>
function getSearchVal(){
alert($(“#search”).val());
}
</</span>script>
</</span>head>

<</span>body>

<</span>span style=”color: #0bca54;”><</span>%–
This is my JSP page. <</span>br>
<</span>form action=”user/manage/queryuser.do” method=”get”>
<</span>input type=”submit” name=”ok” value=”ok” />
</</span>form>
–%></</span>span>

<</span>div class=”ui-widget”>

<</span>form action=”" method=”post”>
<</span>label for=”mylike”>模糊匹配: </</span>label>
<</span>input id=”mylike” style=”width:150px;” />

<</span>label for=”search”>分类模糊匹配: </</span>label>
<</span>input id=”search” style=”width:150px;” />


<</span>input type=”button” name=”btn” value=”获取选中值” onclick=”getSearchVal();” />

<</span>label for=”city”>Json数据匹配:</</span>label>
<</span>input id=”city” style=”width:300px;” />
<</span>input type=”text” id=”citycode” />
</</span>form>

</</span>div>

<</span>div class=”ui-widget” style=”margin-top:2em; font-family:Arial”>
Result:
<</span>div id=”log” style=”height: 200px; width: 300px; overflow: auto;” class=”ui-widget-content”></</span>div>
</</span>div>

</</span>body>
</</span>html>

后台请求的Java代码如下：

Java代码 收藏代码
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.shihuan.core.framework.control.BaseControl;
import com.shihuan.core.framework.query.PageUtil;
import com.shihuan.core.framework.query.ReportPage;
import com.shihuan.core.framework.utils.DecodeUtil;
import com.shihuan.core.framework.utils.OpMessage;
import com.shihuan.service.UserService;

@Controller
@RequestMapping(value = “user/manage”)
public class UserCtrl extends BaseControl {

protected org.apache.log4j.Logger logger = org.apache.log4j.Logger.getLogger(getClass().getName());

@Autowired
private UserService userService;
@RequestMapping(value = “queryjsondata.do”)
@ResponseBody
public void queryjsondata(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println(request.getParameter(“color: #0000ff;”>myparam”) + ” — ” + request.getParameter(“color: #0000ff;”>mynum”) + ” — ” + request.getParameter(“color: #0000ff;”>name_startsWith”));

String jsondata = “[{\"uid\":\"123\", \"displayname\":\"my123\", \"mail\":\"mail123\"}, {\"uid\":\"456\", \"displayname\":\"my456\", \"mail\":\"mail456\"}, {\"uid\":\"789\", \"displayname\":\"my789\", \"mail\":\"mail789\"}]“;

response.setContentType(“text/plain; charset=UTF-8″);
response.setCharacterEncoding(“UTF-8″);

response.setHeader(“Pragma”, “No-cache”);
response.setHeader(“Cache-Control”, “no-cache”);
response.setDateHeader(“Expires”, 0);

response.getWriter().println(jsondata);
}
}