实现比较简单,说简单是因为有现成的控件可以依赖,要是从头开始实现这个控件的话确实比较麻烦,以前我做过一个做好的时候虽然勉强可以用,但是还是存在不少问题。
这个控件堪称完美,是利用jquery框剪实现的,废话少说,直接上代码吧。
主页面 index.jsp
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<style type="text/css"><!--
.autocomplete-w1 { background:url($manageModule.setTarget("/imgs/shadow.png")) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
-->
</style>
</head>
<body>
<input type="text" name="q" id="query" />
</body>
</html>
<script>
var reEscape = new RegExp('(\\' + ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'].join('|\\') + ')', 'g');
function fnFormatResult(value, data, currentValue) {
var pattern = '(' + currentValue.replace(reEscape, '\\$1') + ')';
return value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
}
var options, a;
// $(document).ready(function() {
// $('#term').autocomplete({
// serviceUrl:'php/ajax/autosuggest.php',
// maxHeight:400,
// width:250,
// deferRequestBy: 20
// });
///
$(document).ready(function(){
options = { serviceUrl:'suggest.jsp',
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data);} };
// a = $('#query').autocomplete(options);
var a = $('#query').autocomplete({
serviceUrl:'suggest.jsp',
minChars:2,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:300,
zIndex: 9999,
deferRequestBy: 20, //miliseconds
noCache: true, //default is false, set to true to disable caching
// callback function:
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); }
});
});
</script>
响应查询的jsp:suggest.jsp
{
query:'Li',
suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['LR','LY','LI','LT']
}
注意:执行这个demo的时候input控件中一定要填写“Li”,不然看不到效果。