<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
/*==========用户自定义方法==========*/
//城市数据
var cityList;
//autocomplete选项
var options = {
minChars: 1,
max: 500,
width: 250,
matchContains: true,
formatItem: function(row, i, max) {//显示出来的项格式
return i + "/" + max + ": \"" + row.ProductID + "\" [" + row.ProductName + "]";
},
formatMatch: function(row, i, max) {
return row.ProductName; //用户输入的内容在哪些数据项里面搜索。例如现在是在productName搜索，若要加上ProductID则为 return row.productID+" "+ row.ProductName;
},
formatResult: function(row) {
return row.ProductName;
}
};
//autocomplete初始化函数
function initAutoComplete(json) {
$("#inputName").autocomplete(json, options);
$("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.
$("#inputId").val(data.ProductID);
});
}
/*==========加载时执行的语句==========*/
$(function() {
//加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
$.getJSON("products.ashx", {}, function(json) {
initAutoComplete(json);
})
});
</script>
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
<h3>
Demo. 应用AutoComplete插件 </h3>
<br style="clear: both" />
<div class="formLabel">
<label for="inputName">请输入城市拼音和汉字:</label>
</div>
<div class="formInput">
<input id="inputName" name="inputName" type="text" />
</div>
<br style="clear:both" />
<br style="clear: both" />
<div class="formLabel">
<label for="inputId">城市ID:</label></div>
<div class="formInput">
<input id="inputId" name="inputId" type="text" /></div>
<br style="clear: both" />
<br style="clear: both" />
</div>
</body>