您的位置：首页 > Web前端 > JQuery

jQuery UI Autocomplete ajax动态赋值实例

2016-01-21 00:21 751 查看

源码下载：https://git.oschina.net/paincupid/springmvc.git

下载的应用环境：spring STS, jdk1.7,pivotal

下载后的访问地址: http://localhost:8080/springmvc/jsp/widget/autocomplete-orgrinal.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;
%>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link type="text/css" href="<%=basePath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" />
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
select {
width: 200px;
}
</style>
</head>
<body>

<h1>Welcome to jQuery UI!</h1>

<h2 class="demoHeaders">Autocomplete</h2>
<div>
<input id="autocomplete" title="type "a"">
</div>

<h2 class="demoHeaders">Autocomplete Ajax</h2>
<div>
<input id="autoByAjax" title="type "a"">
<input id="autoByAjaxVal"  type="hidden">
<button id="btn" type="button">submit</button>
</div>

</body>
</html>

<script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery-ui/jquery-ui.js"></script>
<script>
$(function(){
var dataArray=[];
var option = {
max: 12,    //列表里的条目数
minChars: 0,    //自动完成激活之前填入的最小字符
width: 400,     //提示的宽度，溢出隐藏
scrollHeight: 300,   //提示的高度，溢出显示滚动条
matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: true,    //自动填充
minLength: 0,
select: function (event, ui) {
$("#autoByAjax").val(ui.item.label); // display the selected text
$("#autoByAjaxVal").val(ui.item.id); // save selected id to hidden input
}
};
$.ajax({
url: "<%=basePath%>/formWidget/getPersonDropDownTips.json",
type: "GET",
dataType: "json",
success: function(data){
if(data.success){
var reslist = data.result;
for(var i=0; i<reslist.length; i++){
var vo = reslist[i];
dataArray.push({id :vo.id, label: vo.name+"a"});
}

}
}

});

//$("#autoByAjax").autocomplete({source: dataArray}, option);
$("#autoByAjax").autocomplete({source: dataArray}, option).on('focus', function() { $(this).keydown(); });

$("#btn").click(function(){
var v = $("#autoByAjaxVal").val();
alert(v);
});
});

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});

</script>

转载请注明：/article/8544959.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航