求实现客服端Google搜索条功能查JavaScript代码？

xiapuwen520 2010-09-11 11:41:53

想做一个类似Google搜索输入内容时探出一个层显示功能模糊查询的内容，现在我内容已经查询出来了，就是JavaScript不怎么会写，希望显示出层后显示5条结果，选择结果跳到相应的页面求高手指点下，个人觉得是在层里面在加个表格，然后再没个TD里面循环显示查询出来的标题，点击单元格就进行页面跳转，用的是ajax(DWR框架)，下面是我自己随便的：



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>My JSP</title>

		<script type='text/javascript'

			src='/bookDWR/dwr/interface/JTitleBiz.js'></script>

		<script type='text/javascript' src='/bookDWR/dwr/engine.js'></script>

		<script type='text/javascript' src='/bookDWR/dwr/util.js'></script>

		<script type="text/javascript">

	function chaxun() {

		var title = document.getElementById("titleName").value;

		JTitleBiz.findByName(title, huidiao);

	}

	function huidiao(data) {

		var divErrInfo = document.getElementById("errInfo");

		divErrInfo.style.display = 'block';

		for ( var i = 0; i < data.length; i++) {

			divErrInfo.innerHTML = data[i].title;

		}

	}

	function hide() {

		document.getElementById("errInfo").style.display = 'none';

	}

</script>

	</head>

	<body>

		<form action="do" method="get" id="name">

			<table>

				<tr>

					<td>

						<input type="text" id="titleName" onkeyup=

	chaxun();;

onblur="hide()" size="40">

						<input type="button" value="查询">

					</td>

				</tr>



				<tr>

					<td>

						<DIV id="errInfo" style="display: none;">

							要显示的值

						</DIV>

					</td>

				</tr>



			</table>



		</form>

	</body>

</html>

...全文

89 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2010-09-12

打赏
举报

function huidiao(data) {

        var divErrInfo = document.getElementById("errInfo");

        divErrInfo.style.display = 'block';

        for ( var i = 0; i < data.length; i++) {//直接设置为链接的形式就行了，注意如果返回的数据链接键不是URL修改为你自己的

            divErrInfo.innerHTML = '<a href="'+data[i].URL+'" target="_blank">'+data[i].title+'</a>';

        }

    }

斯洛文尼亚旅游 2010-09-12

打赏
举报

把div的position设置为absolute的，这样就不会占用其他的空间了。然后设置left和right属性使div的位置在input下面。

function getAbsPos(objId){//根据Id获取这个对象的绝对定位

  var o=document.getElementById(objId);

  var p=new Object();

  p.x=o.offsetLeft;

  p.y=o.offsetTop;

  while(o=o.offsetParent){

    p.x+=o.offsetLeft;

    p.y+=o.offsetTop;

  }

  return p;

}



    function huidiao(data) {

        var divErrInfo = document.getElementById("errInfo");

        var p=getAbsPos('titleName');///

        divErrInfo.style.left=p.x+'px';///

        divErrInfo.style.top=p.y+divErrInfo.offsetHeight+'px';///

        divErrInfo.style.display = 'block';

        divErrInfo.innerHTML='';

        for ( var i = 0; i < data.length; i++) {

            divErrInfo.innerHTML = '<a href="'+data[i].URL+'" target="_blank">'+data[i].title+'</a>';

        }



    }

<DIV id="errInfo" style="display: none;position:absolute;">要显示的值</DIV>

xiapuwen520 2010-09-12

打赏
举报

[Quote=引用 3 楼 ibm_hoojo 的回复:]
CSS code
function huidiao(data) {
var divErrInfo = document.getElementById("errInfo");
divErrInfo.style.display = 'block';
var result = "";
for ( var i = 0; i < da……
[/Quote]
这样是可以，不过不是要想要的效果，这样要是文本框下面还有内容，如果你搜索出来的内容显示在层里面就会把文本框下的的内容给挤下去，你知道如何把层显示出来而有不吧下面的文本给挤下去，直接覆盖在上面，当点击div层里面的内容时把内容放到文本框里面，层消失。

hoojo 2010-09-12

打赏
举报

function huidiao(data) {

        var divErrInfo = document.getElementById("errInfo");

        divErrInfo.style.display = 'block';

        var result = "";

        for ( var i = 0; i < data.length; i++) {//直接设置为链接的形式就行了，注意如果返回的数据链接键不是URL修改为你自己的

            result += '<a href="'+data[i].URL+'" target="_blank">'+data[i].title+'</a><br/>';

        }

        divErrInfo.innerHTML = result;

    }

xiapuwen520 2010-09-12

打赏
举报

[Quote=引用 1 楼 showbo 的回复:]
JScript code
function huidiao(data) {
var divErrInfo = document.getElementById("errInfo");
divErrInfo.style.display = 'block';
for ( var i = 0; i < data.length; i++) {//直接设……
[/Quote]

没用额· ，查询出来的集合着先只显示最后一条！