java+div实现下拉框自动补全

yuandaobo 2011-07-08 07:31:38

我想做个java+div实现下拉框自动补全,当文本框里面的值发生改变时，就从数据库查询数据，将数据显示在下拉框中。我在网上找了些例子。可是有问题，运行不出来。所以我想请哪位给我一个完整的例子。先谢了。邮箱：yuandaobo@163.com
急。。

...全文

345 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tirrer 2011-07-11

打赏
举报

楼上的，说的好，我顶你~

燥动的心 2011-07-09

打赏
举报

[Quote=引用 1 楼 lsw645645645 的回复:]

http://jqueryui.com/demos/autocomplete/
是这种么
[/Quote]
这个地址里面就有下载

KingWolfOfSky 2011-07-09

打赏
举报

弹出框的位置可以看看这个
JavaScript获取文本框光标的像素位置

KingWolfOfSky 2011-07-09

打赏
举报



var suggestJS = {};

(function() {

	var completeDiv, inputField, nameTable, nameTableBody, selectIndex, tempInputValue, suggest;

	var weibo;

	suggestJS.findNames = findNames;



	function initVars(inputBox) {

		inputField = inputBox || document.getElementById("names");

		completeDiv = document.getElementById("popup");

		nameTable = document.getElementById("name_table");

		nameTableBody = document.getElementById("name_table_body");

		if (!completeDiv) {

			completeDiv = document.createElement('div');

			completeDiv.id = 'popup';

			if (!nameTable) {

				nameTable = document.createElement('table');

				nameTable.id = 'name_table';

				nameTable.cellspacing = 0;

				nameTable.cellpadding = 0;

				if (!nameTableBody) {

					nameTableBody = document.createElement('tbody');

					nameTableBody.id = 'name_table_body';

				}

				nameTable.appendChild(nameTableBody);

			}

			completeDiv.appendChild(nameTable);

			document.getElementsByTagName('body')[0].appendChild(completeDiv);

		}

	}

	function findNames(event, inputBox,auto) {

		var eventkey = event.keyCode;		

		initVars(inputBox);

		if (eventkey == 27) {// Esc

			esc();

		} else if (eventkey == 40 || eventkey == 38) {// 上下键

			changeSelect(eventkey);

		} else if (eventkey == 13 || eventkey == 32) {// 回车符

			completeDiv.parentNode.removeChild(completeDiv);

		} else {

			var inputValue = inputField.value;

			var atIndex = inputValue.lastIndexOf('@');

			if (atIndex == -1) { // 无@

				completeDiv.parentNode.removeChild(completeDiv);

				return;

			}

			weibo = inputValue.substring(0, atIndex);

			inputValue = inputValue.substring(atIndex + 1, inputValue.length);

			if (inputValue == null || inputValue == "") {

				suggest = null;

				completeDiv.parentNode.removeChild(completeDiv);

				return;

			}

			selectIndex = -1;

			clearNames();

			tempInputValue = inputValue;

			if (suggest == null) {// 发起ajax请求

				$.ajax( {

					url : "ajaxURL",

					type : 'GET',

					dataType : 'String',

					timeout : 1000,

					error : function() {

						completeDiv.parentNode.removeChild(completeDiv);

					},

					success : function(data) {

						//处理数据,并显示

			}

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

				if (suggest[i].uname.indexOf(inputValue) == 0 || (suggest[i].pinyin).indexOf(inputValue) == 0)

					setNames(inputValue, suggest[i].uname, suggest[i].head);

			}

		}

	}

	function esc() {

		inputField.value = weibo;

		completeDiv.parentNode.removeChild(completeDiv);

	}



	function changeSelect(eventkey) {

		var suggestSize = nameTableBody.childNodes.length;

		if (suggestSize == null || suggestSize == 0)

			return;

		if (selectIndex != -1)

			nameTableBody.childNodes[selectIndex].setAttribute("class", 'mouseOut');

		if (eventkey == 40 && selectIndex < suggestSize - 1)

			selectIndex++;

		else if (eventkey == 38 && selectIndex > -1)

			selectIndex--;

		if (selectIndex == -1) {

			inputField.value = weibo + '@' + tempInputValue;

		} else {

			nameTableBody.childNodes[selectIndex].setAttribute("class", 'mouseOver');

			inputField.value = weibo + '@'

					+ (nameTableBody.childNodes[selectIndex].innerText || nameTableBody.childNodes[selectIndex].textContent);

		}

	}

	function clearNames() {

		var ind = nameTableBody.childNodes.length;

		for ( var i = ind - 1; i >= 0; i--)

			nameTableBody.removeChild(nameTableBody.childNodes[i]);

	}

	function setNames(inputValue, txt, img) {

		setOffsets();

		var row, cell, txtNode, imgNode;

		var nextNode = txt;

		row = document.createElement("tr");

		cell = document.createElement("td");

		cell.onmouseout = function() {

			this.className = 'mouseOut';

		};

		cell.onmouseover = function() {

			this.className = 'mouseOver';

		};

		cell.onclick = function() {

			populateName(this);

		};

		if (inputValue == txt)

			cell.onselect = true;

		txtNode = document.createElement('label');

		txtNode.innerHTML = nextNode;

		imgNode = document.createElement('img');

		imgNode.width = imgNode.height = 30;

		imgNode.src = img;

		cell.appendChild(imgNode);

		cell.appendChild(txtNode);

		row.appendChild(cell);

		nameTableBody.appendChild(row);

	}



	function setOffsets() {

		var p ;

		p=textareaTools.getInputPositon(inputField);//获取光标位置，见http://blog.csdn.net/kingwolfofsky/article/details/6586029

		var top = p.bottom;

		var left = p.left;

		$('#popup').css("left", left);

		$('#popup').css("top", top);

	}



	function populateName(cell) {

		inputField.value = weibo + '@' + cell.childNodes[1].innerHTML;

		completeDiv.parentNode.removeChild(completeDiv);

	}

yuandaobo 2011-07-08

打赏
举报

[Quote=引用 4 楼 lsw645645645 的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>……
[/Quote]
或都发我邮箱。谢了。yuandaobo@163.com

yuandaobo 2011-07-08

打赏
举报

lsw645645645 2011-07-08

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="../jquery-ui/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet"

        type="text/css" />

    <script src="../jquery-ui/js/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script src="../jquery-ui/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript">

    $(function () {

        //显示的数据

        var availableTags = [

			"ActionScript",

			"AppleScript",

			"Asp",

			"BASIC",

			"C",

			"C++",

			"Clojure",

			"COBOL",

			"ColdFusion",

			"Erlang",

			"Fortran",

			"Groovy",

			"Haskell",

			"Java",

			"JavaScript",

			"Lisp",

			"Perl",

			"PHP",

			"Python",

			"Ruby",

			"Scala",

			"Scheme"

		];

        $("#tags").autocomplete({

            source: availableTags//设置显示的数据

        });

    });

</script>

<input type="text" id="tags" />

</body>

</html>