动态加载数据autoComplete

注意需要jquery.autocomplete.js和jquery.js连个文件 该文件可以在我的另一篇《动态加载数据autoComplete(mysql数据库)》有源码/



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<script type="text/javascript">
$().ready(function() {


function log(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}

function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}

$("#suggest1").focus().autocomplete(cities);


$("#suggest14").autocomplete(cities, {
matchContains: true,
minChars: 0
});
$("#suggest3").autocomplete(cities, {
multiple: true,
mustMatch: true,
autoFill: true
});


$(":text, textarea").result(log).next().click(function() {
$(this).prev().search();
});


$("#suggest4").result(function(event, data, formatted) {
var hidden = $(this).parent().next().find(">:input");
hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
});


$("#scrollChange").click(changeScrollHeight);

$("#clear").click(function() {
$(":input").unautocomplete();
});
});


function changeOptions(){
var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
if (max > 0) {
$("#suggest1").setOptions({
max: max
});
}
}
</script>

</head>

<body>


<div id="content">
<p>
<label>Single City (local):</label>
<input type="text" id="suggest1" />
<input type="button" value="Get Value" />
</p>
<p>&nbsp;</p>
<ol id="result"></ol>
</div>
<a href="autocompleteAjaxTag.jsp">autocompleteAjaxTag.jsp</a>
</body>
</html>

你可能感兴趣的:(autocomplete)