模拟文本框自动完成功能代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】模拟文本框自动完成功能

作者:loveheronly / 发布于2014/8/26/ 722


	<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestAutocomplete.aspx.cs" Inherits="MySEO.TestPage.TestAutocomplete" %>

	
	<!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 runat="server">
	 <title></title>
	 <style type="text/css">
	 body
	 {
	 font-size:12pt;
	 }
	 #divAutoComplete
	 {
	 display:none;
	 position:absolute;
	 border:1px green solid;
	 background-color:Gray;
	 z-index:999;
	 }
	 .select
	 {
	 background-color:Yellow;
	 }
	 </style>
	 <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
	 <script type="text/javascript">
	 var rowIndex = 0;
	 var selValue = "";
	// $(document).keydown(function (e) {
	// if (e.keyCode == 8) {
	// alert('return');
	// }
	// });
	 $(function () {
	 $("#txtSearch").keypress(function (e) {
	 var key = (e.keyCode) || (e.which) || (e.charCode); //兼容IE(e.keyCode)和Firefox(e.which)

	
	 if (key != "13") {
	 var pos = new getPos(this);
	 $("#divAutoComplete").attr("style", ";top:" + (pos.Top + this.clientHeight + 5) + "px;left:" + pos.Left + "px");
	 $("#divAutoComplete").show();
	 $("#tblData tr").eq(rowIndex).addClass("select");
	 }
	 });

	
	 $("#txtSearch").keydown(function (e) {
	 var key = (e.keyCode) || (e.which) || (e.charCode); //兼容IE(e.keyCode)和Firefox(e.which)
	 var moveIndex = "";
	 if (key == "38") {//向上
	 moveIndex = getIndexUp();
	 $("#tblData tr").removeClass("select");
	 $("#tblData tr").eq(moveIndex).addClass("select");
	 selValue = $("#tblData tr").eq(moveIndex).find("td").eq(0).text();
	 }
	 if (key == "40") {//向下
	 moveIndex = getIndexDown();
	 $("#tblData tr").removeClass("select");
	 $("#tblData tr").eq(moveIndex).addClass("select");
	 selValue = $("#tblData tr").eq(moveIndex).find("td").eq(0).text();
	 }
	 if (key == "13") {
	 $("#txtSearch").val(selValue);
	 $("#divAutoComplete").hide();
	 }
	 if (key == "8") { //退格键
	 //alert('return');
	 }
	 });
	 });

	
	 function getIndexUp() {
	 if (rowIndex > 0) {
	 rowIndex--;
	 }
	 else {
	 rowIndex = $("#tblData tr").length-1
	 }
	 return rowIndex;
	 }

	
	 function getIndexDown() {
	 if (rowIndex < $("#tblData tr").length-1) {
	 rowIndex++;
	 }
	 else {
	 rowIndex = 0;
	 }
	 return rowIndex;
	 }

	

	
	 function getPos(obj) {
	 this.Left = 0;
	 this.Top = 0;
	 this.Height = obj.offsetHeight;
	 this.Width = obj.offsetWidth;
	 var tempObj = obj;
	 while (tempObj.tagName.toLowerCase() != "body" && tempObj.tagName.toLowerCase() != "html") {
	 this.Left += tempObj.offsetLeft;
	 this.Top += tempObj.offsetTop;
	 tempObj = tempObj.offsetParent;
	 }
	 }
	 </script>
	</head>
	<body>
	 <input type="text" id="txtSearch" />
	 <div id="divAutoComplete">
	 <table id="tblData">
	 <tr>
	 <td>Search Word One</td>
	 </tr>
	 <tr>
	 <td>Search Word Two</td>
	 </tr>
	 <tr>
	 <td>Search Word Three</td>
	 </tr>
	 </table>
	 </div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　自动完成　

同语言下

可能有用的

loveheronly贡献的其它代码(6)