实现比较简单，说简单是因为有现成的控件可以依赖，要是从头开始实现这个控件的话确实比较麻烦，以前我做过一个做好的时候虽然勉强可以用，但是还是存在不少问题。
这个控件堪称完美,是利用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”，不然看不到效果。
分享到：
相关推荐
jQuery Suggest 插件是一种强大的前端开发工具，它能够为用户在输入框中提供实时的建议和匹配，类似于百度和Google搜索的自动补全功能。这种功能对于提高用户体验、简化用户输入过程具有显著效果。在网页应用中，它...
在本文中，我们将深入探讨AJAX技术在JavaScript库jQuery中的应用，特别是通过一个实战案例——仿谷歌搜索建议（Google Suggest）的自动补全功能。这个功能广泛应用于各种搜索框，能够极大地提升用户体验，使用户在...
在本文中，我们将深入探讨如何使用AJAX技术来实现一个仿Google Suggest的搜索提示功能。Google Suggest是Google搜索引擎中的一个特色功能，它在用户输入关键词时提供实时的搜索建议，极大地提高了搜索效率和用户体验...
本实例将探讨如何将这两者整合，通过AJAX技术实现一个仿Google Suggest的自动补全功能，该功能通常用于输入框中，为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先，`index.jsp`是用户界面...
总的来说，这个资源包提供了一个关于如何利用jQuery实现Google Suggest样式的自动完成功能的教程或实例。开发者可以通过学习和实践，提升自己在前端交互设计方面的能力，为网站或应用增加高效、友好的用户体验。同时...
总结来说，这个项目展示了如何利用 `jQuery UI` 的 `autocomplete` 插件和 `.NET` 后端实现一个模糊搜索功能，同时提供了良好的用户体验，如实时搜索提示和加载动画。通过对这些文件的分析，我们可以学习到前后端...
jquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，...
**jQuery 实例5：仿 Google Suggest 自动补全** 在网页开发中，提供自动补全功能能够极大地提升用户体验，尤其是在搜索或者输入框输入时。Google 的搜索建议就是这一功能的经典应用，它能够根据用户输入的关键词...
jQuery-Suggest 是一个基于 jQuery 的 suggest 组件，它主要为 PC 端的搜索框提供建议词条。 为什么要做这个组件 我曾经做过一个基于 Zepto 简洁实用的 suggest 组件：。 这个组件稍微改造即可在 jQuery 下使用...
JQuery插件Suggest来做那些机票预订网站中的输入智能提示功能，这个功能对于用户体验性来说，挺不错的,用于实现类似百度的智能提示功能也是一个不错的选择。
**jQuery Suggest 插件详解** 在Web开发中，用户界面的交互性和便捷性是提升用户体验的关键因素之一。jQuery Suggest插件就是这样一个工具，它为网页中的输入框提供了自动补全功能，使得用户在输入时能快速找到并...
Google Suggest是Google搜索引擎的一项功能，它在用户输入关键词时即时提供相关的搜索建议。这项功能通过减少用户输入时间和提高搜索效率，极大地提升了搜索体验。Google Suggest的实现基于AJAX技术，能够实现在不...
Google Suggest 是一项能够为用户提供即时搜索建议的功能，其工作方式是在用户输入搜索词的过程中动态提供可能的搜索建议，从而帮助用户更快地找到所需的信息。这项技术背后的实现不仅涉及前端的 Ajax 技术，还包括...
基于JQUERY的SUGGEST效果，自己写的
**Ajax仿Google Suggest数据库版**是基于Ajax技术实现的一种搜索建议功能，它模拟了Google搜索引擎在用户输入关键字时实时显示搜索建议的效果。这个项目主要使用Java作为后端语言，结合Ajax技术，为前端用户提供流畅...
谷歌建议（Google Suggest）是一项在线搜索功能，它在用户输入查询时实时提供可能的搜索建议。这个项目基于jQuery库实现，使得用户在输入框中输入中文时也能得到相关的搜索建议。jQuery是一个广泛使用的JavaScript库...
【标题】"GoogleSuggest ajax自动补全"是基于AJAX和jQuery技术实现的一个功能，它主要用于提升用户体验，提供在用户输入时实时显示搜索建议的功能。这个功能在很多搜索引擎和网站中都有应用，比如Google搜索，它能...
本文将探讨如何利用jQuery和JavaScript编写一个功能完备的国籍控件。 首先，让我们来了解控件的主要组成部分。国籍控件的核心是两个主要文件：navtionality.js和main.css。navtionality.js负责构建国籍控件的DOM...