利用jquery制作google搜索一样的suggest控件-优快云博客

本文介绍了一个基于 jQuery 的自动补全控件实现。该控件使用简单且功能完善，通过示例代码展示了如何设置输入触发字符数、延迟请求时间等参数，并提供了一个具体的 DEMO 例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现比较简单，说简单是因为有现成的控件可以依赖，要是从头开始实现这个控件的话确实比较麻烦，以前我做过一个做好的时候虽然勉强可以用，但是还是存在不少问题。

这个控件堪称完美,是利用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”，不然看不到效果。