<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Type in ComboBox to try auto complete.</div>
</div>
<select class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
在此代码中,自动完成功能与组合框一起使用。
如何使用jquery easy ui实现自动完成功能。
答案 0 :(得分:1)
http://jsfiddle.net/E5dhY/5/ 检查以下链接我已经为您创建的同一下拉列表实现了自动完成。
你必须包括
1.jquery
2.jquery ui
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript'>
$(function() {
var cityArray = ["Alabama", "Alaska", "Arizona", "Arkansas"];
$(".easyui-combobox").autocomplete({
source: cityArray
});
</script>
<style type='text/css'>
</style>
</head>
<body>
<h2>Basic ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Type in ComboBox to try auto complete.</div>
</div>
Auto Complete Box :
<input type="autoCompleteBox" class="easyui-combobox" name="state" style="width:200px;">
</body>
</html>