<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google.html</title>
<meta http-equiv="content-type" content="text/html;charset=GBK">
<script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>
<script type="text/javascript">
var line = 0;
var oldValue = '';
function del() {
if ($("#newDiv")) {
$("#newDiv").remove();
line = 0;
}
}
$(document).ready(function() {
//文本框失去焦点时层消失
$(document.body).click(function() {
del();
});
});
function vchange() {
//alert("value change");
del();
//定位DIV
var top = $("#key").offset().top;
var left = $("#key").offset().left;
var newDiv = $("<div/>").width($("#key").width() + 6).css(
"position", "absolute").css("backgroundColor", "white")
.css("left", left).css("top", top + $("#key").height() + 6)
.css("border", "1px solid blue").attr("id", "newDiv");
/*过滤非法字符输入*/
if($("#key").value != ""){
//alert(oldValue);
/*过滤同名多次查询*/
if ($("#key").val() != oldValue) {
oldValue = $("#key").val();
var url = 'tsearch.action';
var params = {
//POST参数编码处理
key : encodeURI($("#key").val())
};
jQuery.post(url, params, callbackFun, 'json');
}
$(document.body).append(newDiv); //添加DIV
}
if ($("#key").val() == "") {
$("#newDiv").remove();
}
}
//回调函数
function callbackFun(data) {
var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(
"cellspacing", "0");
if (data.result == "") {
//alert("你的关键字有误!");
var tr = $("<tr/>");
var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")
.css("margin", "5 5 5 5");
tr.append(td1);
table.append(tr);
$("#newDiv").append(table);
} else {
var array = data.result.split(",");
for ( var i = 0; i < array.length - 1; i++) {
//alert(array[i]);
var tr = $("<tr/>").css("cursor", "pointer").mouseout(
function() {
$(this).css("backgroundColor", "white").css(
"color", "black");
}).mouseover(
function() {
$(this).css("backgroundColor", "blue").css("color",
"white");
}).click(function() {
$("#key").val($(this).find("td").eq(0).html());
del();
});
var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")
.css("margin", "5 5 5 5");
tr.append(td1);
table.append(tr);
$("#newDiv").append(table);
}
}
}
</script>
</head>
<body>
<h1>Google搜索</h1>
<div style="margin-top: 20px; margin-left: 30px">
请输入搜索关键字:
<input name="key" id="key" onkeyup="vchange()" style="width: 300">
<input type="button" value="Goolge一下">
</div>
</body>
</html>
分享到:
相关推荐
仿GoogleSuggest自动补全的功能 绝对实用可用
java与jQuery整合ajax仿googleSuggest自动补全实例,以返回的json格式的数据对象
NULL 博文链接:https://lc2586.iteye.com/blog/731375
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...
NULL 博文链接:https://sxpujs.iteye.com/blog/411886
NULL 博文链接:https://312788172.iteye.com/blog/607343
仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真...
采用ajax+access+asp.net一起开发的一个仿google suggest 功能的应用程序.供学习ajax技术的开发者学习参考!
仿google suggest仿google suggest仿google suggest仿google suggest仿google suggest
自动补全例子基于php 非常简单易用 jquery suggest 自动补全插件演示 自动补全 jquery自动补全 jquery 输入提示
NULL 博文链接:https://xalydxn.iteye.com/blog/735060
ajax仿google suggest 数据库版。。java
虽然是演示,但是并不是HelloWorld那种不实用的例子,而是包含两个经典的应用:用户名检测和Google Suggest自动完成。 两个例子都做得比较细,样式也用的比较多,所以一定是可以用于实际项目中的,希望对大家有帮助...
好东西能用,我经常用!大家共享!
ajax jquery技术 GoogleSuggest 自动补全 源代码
利用Visual Studio 2010和SQLserver2008基于net framework 4开发的类似google suggest自动完成功能代码。 可以使用上下键进行选择回车键选定,也可以使用鼠标点击选定。 默认是查询的系统数据库的一张表,使用时请...
AJAX实现类Google Suggest效果 *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://www.okajax.com/demo/suggest/ *:文件结构: index.htm:首页,展现效果 ajax_result.asp:ajax调用后台返回结果文件 result.asp:...
仿googlesuggest,基于ASP的仿google猜想搜索
Flex3.0 实现 仿谷歌的 googlesuggest