jQuery UI Autocomplete ajax动态赋值实例

最新推荐文章于 2021-07-26 22:52:07 发布

arthur.dy.lee

最新推荐文章于 2021-07-26 22:52:07 发布

阅读量8.2k

点赞数 2

分类专栏： jquery 文章标签： jquery-ui autocomplete ajax动态取值 id

本文链接：https://blog.csdn.net/paincupid/article/details/50551771

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

源码下载：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>