`
icarusliu
  • 浏览: 238182 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

类google suggestion

阅读更多

1. js代码:

//google suggest start
	var taxonNameList = null;
	var index = 0;
	var size = 0;
	var taxonNameArray ;
	 //set the panel on the top of others
                $(document).ready(function(){
                     var left = $("#taxonQuery").offset().left;
                     var top = $("#taxonQuery").offset().top;
  
                     var panel = $("#taxonNameListPanel");
                     panel.css("left",left);
                     panel.css("top",top + 20);
                     panel.css("background","#fff");
                });	
	function taxonNameSuggest(e){
		//keyset
		var e2 = window.event||e;
		
		 var keyStr = e2.keyCode;
		
		 if(keyStr!=38&&keyStr!=40&&keyStr!=13){
			var key = $("#taxonQuery").val();
			var length = key.length;
			var panel =  $("#taxonNameListPanel");
			
			$.get("../taxonNameSuggest?suffix=" + key,function(data){
				taxonNameList = data;
				setTaxonNamePanel();
				panel.show();
			});
		}else{		
			if(keyStr==38){//up
					if(index!=size){
						if(index==-1)index = index +1;
						$("#taxonQuery").val(taxonNameArray[index]);
						$("#item" + index).css("background","gray");
						$("#item" + (index - 1)).css("background","");
						index=index+1;
					}
			}else if(keyStr==40){//down
					if(index!=-1){
						if(index==size)index = index-1;
						$("#taxonQuery").val(taxonNameArray[index]);
						$("#item" + index).css("background","gray");
						$("#item" + (index + 1)).css("background","");
						index=index-1;
					}
			}else{//enter
				hide();
				$("#searchButton").focus();
			}
		}
	}
	
	function setTaxonNamePanel(){
		taxonNameArray = taxonNameList.split(";");
		var table = document.getElementById("taxonNameTable");
		//delete all rows
		size = taxonNameArray.length-1;
		index = size - 1;
		for(i=table.rows.length-1;i>=0;i--){
			table.deleteRow(i);
		}
		
		for(i=0;i<taxonNameArray.length;i++){
			if(taxonNameArray[i]==null||taxonNameArray[i]=="")break;
			var newRow = table.insertRow(0);
			newRow.onmouseover=mup;
			newRow.onmouseout=mout;
			var newCol = newRow.insertCell(0);
			newCol.innerHTML = "<div onclick='setValue(this)' id='item" + i + "''>" + taxonNameArray[i] + "</div>";
		}
	}
	
	function mup(){
		$(this).css("background","gray");
	}
	
	function mout(){
		$(this).css("background","");
	}
	
	function setValue(t){
		$("#taxonQuery").val($(t).text());
		hide();
	}
	
	function hide(){
		$("#taxonNameListPanel").hide();
	}
	//end of google suggest
	

 

2. 页面代码:

<input id="taxonQuery" type="text" value="<%if(request.getParameter("taxonName")!=null) out.print(request.getParameter("taxonName")); %>" onkeyup="taxonNameSuggest(event)" />
<input id="searchButton" type="button" value="Search" onClick="taxonSearch();">
<div id="taxonNameListPanel" style="width: 155px; border: 1px solid #000; position: relative; left: 104px; top: 0px; display: none;">
	<table width="100%" id="taxonNameTable" style="cursor: hand;">
	</table>
	<div style="float: right;clear:both;">
		<a href="#" style="border: none; font-size: 12px;" onclick="hide(this)">close</a>
	</div>
</div>

 

分享到:
评论

相关推荐

    百度地图步行导航+POI检索+Suggestion提示

    在这个版本的Android Studio中,开发者可以享受到Google提供的最新IDE特性,如Gradle插件升级、性能优化、代码编辑器增强等。在开发百度地图相关应用时,可以通过集成Gradle依赖管理,轻松引入百度地图SDK。同时,...

    谷歌建议搜索(googlesuggestion)ajax,json实现方式搜索建议

    谷歌建议搜索(Google Suggestion)是谷歌搜索引擎提供的一项功能,当用户在搜索框输入关键词时,它会自动显示与输入内容相关的搜索建议。这个功能极大地提高了用户的搜索效率,减少了拼写错误,同时也提供了流行和...

    Marriage Suggestion Program - Android Studio

    3. **数据模型**:定义表示用户和匹配对象的数据结构,如User类和Match类,包含属性和方法来处理信息。 4. **业务逻辑**:实现匹配算法,根据用户输入的条件,如年龄、性别、兴趣等,计算出匹配度,并展示匹配结果...

    Ajax-curl wrapper for Google suggestion-开源

    它给出了谷歌搜索字符串给出的建议列表

    query-auto-suggestion:这是基于bert的查询自动建议服务

    安装pip install -r requirements.txt 跑步python service.py 常问问题 :speech_balloon: 常问问题问:您是否有论文或其他书面说明来介绍模型的详细信息?... 一方面,Google在Wikipedia数据上对BERT

    Typing suggestion-crx插件

    "Typing suggestion-crx插件"的文件名为"Typing_suggestion.crx",这是一个Chrome扩展程序的压缩文件格式,通常用于安装到Google Chrome浏览器中。用户只需将此文件拖放到浏览器的扩展管理页面,或者在设置中启用...

    ecshop仿照淘宝模板搜索下拉框

    ecshop仿照淘宝模板搜索下拉框,ajax实现google suggestion效果

    ajax实现google搜索提示

    本示例将聚焦于如何使用Ajax来实现类似Google搜索时的实时搜索提示功能。 首先,我们要理解Google搜索提示的基本原理。它通过在用户输入关键字时,向服务器发送请求,服务器根据这些关键字返回相关的搜索建议。这些...

    输入框提示 google sugesstion

    标题中的“输入框提示 Google Suggestion”指的是在网页或应用中的自动填充功能,它借鉴了Google搜索的建议机制,当用户在输入框中输入文字时,系统会根据已输入的部分内容提供相关的建议选项,以帮助用户快速完成...

    ajax 实现google搜索 模仿了google的搜索

    **Ajax 实现Google搜索模拟** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本项目中,我们利用Ajax技术模仿了Google的搜索功能,提供了一种实时、...

    成熟的仿百度和goole的搜索联想提示功能

    "成熟的仿百度和Google的搜索联想提示功能"指的是在用户输入关键词时,系统能够实时预测并显示可能的相关搜索词,这些联想词通常是基于用户历史搜索数据、热门搜索趋势或相关词汇关联性来生成的。 实现这一功能的...

    完全仿谷歌搜索 显示信息条数

    首先,我们要理解智能提示(Auto-suggestion)是提高用户体验的关键特性之一。当用户在搜索框中输入关键字时,系统能够实时提供与输入内容相关的建议搜索词。这种功能通常是通过后台数据库或API接口实时查询并返回...

    Custom Suggestion Box Component-开源

    这个组件模仿了Google Suggest的功能,即在用户在输入框中输入字符时,会根据预设的数据源动态地给出匹配的建议,提高了用户的输入效率和体验。 组件的核心特性包括: 1. **实时性**:用户在输入文本框中每输入一...

    类似于google搜索框下拉效果

    在IT行业中,实现“类似于Google搜索框下拉效果”是一项常见的前端开发任务,它涉及到用户体验设计和JavaScript技术的运用。这种效果通常被称为自动补全(Autocomplete)或预测搜索(Predictive Search),它能提高...

    google+百度(jquery-1.3.2) 提示效果

    在本文中,我们将深入探讨如何使用jQuery 1.3.2库来实现类似于Google和百度搜索引擎的提示效果,以及如何确保这种效果在不同浏览器(如IE和Firefox)中具有良好的兼容性。首先,让我们理解jQuery的基本概念。 ...

    jquery仿google自动提示

    jQuery的选择器允许我们根据元素的ID、类、属性等进行选择。例如,如果搜索框的ID为"searchInput",我们可以使用`$("#searchInput")`来获取这个元素。 ### 3. 事件监听 在用户输入时,我们需要监听输入框的`keyup`...

    AJAX技术专题

    目前很多产品里都已经很好地应用了这一技术,比如Google的Gmall、Google Map、Google Suggestion以及微软的Virtual Earth和Start.com等,Kupu(一个开源的JavaScript应用程序)也是一个大量应用AJAX技术的典型案例...

    AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能

    在本文中,我们将深入探讨AJAX技术在JavaScript库jQuery中的应用,特别是通过一个实战案例——仿谷歌搜索建议(Google Suggest)的自动补全功能。这个功能广泛应用于各种搜索框,能够极大地提升用户体验,使用户在...

    Ajax仿google信息提示

    **Ajax仿Google信息提示技术详解** 在Web开发中,用户交互体验是至关重要的,而Google信息提示(Autocomplete)功能就是一个提升用户体验的经典案例。通过Ajax技术,我们可以实现类似Google搜索框那样实时、高效的...

    Ajax实战:Google Suggest风格搜索

    **Ajax实战:Google Suggest风格搜索** Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升...

Global site tag (gtag.js) - Google Analytics