`
mozhenghua
  • 浏览: 319349 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

利用jquery制作google搜索一样的suggest控件

 
阅读更多

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

 

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

分享到：
| 利用xwork封装request parameter
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics