/**
注意本JS与DropUp.css合用使用
在输入框的onkeyup事件调用如:οnkeyup='obj_keyup(target_id,DropUPDIV_id,strurl)'的函数使用
<input type="text" id="TextBox_PRTNUM" name="TextBox_PRTNUM" autocomplete = "off" οnkeyup='obj_keyup("TextBox_PRTNUM","search_suggest","../../server/Ser_ZC_PRTMST.aspx");' size="20" class="input_out" οnfοcus="this.className='input_on';this.οnmοuseοut=''" οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'}; tbblur();" οnmοusemοve="this.className='input_move'" οnmοuseοut="this.className='input_out'" />
使用的弹出选择框
<div id="search_suggest" style="display:none"></div>
服务页面Server.aspx/
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient ;
using MAXWEB.func ;
namespace MAXWEB.temp.NewFolder1
{
public partial class Server : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["searchText"] != null)
{
if (Request.QueryString["searchText"].ToString().Trim().Length > 0)
{
SQLAction sqlac = new SQLAction();
string sqltxt="";
sqltxt = "Select distinct top 10 PRTNUM From ZC_PRTMST Where PRTNUM like '" + Request.QueryString["searchText"].ToString() + "%'";
DataTable dt = sqlac.GetDS(sqltxt).Tables[0];
string returnText = "";
if (dt != null && dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
returnText += dt.Rows[i][0].ToString() + "\n";
}
}
Response.Write(returnText);
}
}
}
}
}
/DropUp.css的内容
body
{
font: 11px arial;
}
.suggest_link
{
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over
{
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#search_suggest
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
.input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
.input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_out{
//height:16px;默认高度
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
width: 146px;
}
**/
var div_index;
div_index = -1; //全局变量
var str_target_id;
var str_DropUp_id;
var str_value_id;
var div_sel_value; //选择的值
div_sel_value = "";
var div_mouseover;
div_mouseover = false;
// js 得到网页中控件绝对位置2010-07-12 12:01
function getAbsoluteLeft(ob) {
if (!ob) { return null; }
var mendingOb = ob;
var mendingLeft = mendingOb.offsetLeft;
mendingOb = mendingOb.offsetParent;
while (mendingOb != null) {
// mendingLeft += mendingOb .offsetParent.offsetLeft;
mendingLeft += mendingOb.offsetLeft;
mendingOb = mendingOb.offsetParent;
}
return mendingLeft;
}
// get absolute TOP position
function getAbsoluteTop(ob) {
if (!ob) { return null; }
var mendingOb = ob;
var mendingTop = mendingOb.offsetTop;
//while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
mendingOb = mendingOb.offsetParent;
while (mendingOb != null) {
mendingTop += mendingOb.offsetTop;
mendingOb = mendingOb.offsetParent;
}
return mendingTop;
}
//检查控件是否可见
function checkobjvisual(e) {
var objvis = false;
if (e) {
if (e.offsetHeight > 0) {
objvis = true;
}
if (e.offsetTop > 0) {
objvis = true;
}
if (e.readOnly == true) {
objvis = false;
}
}
return objvis;
}
function focunext(next_id) {
var code;
if (!e) {
var e = window.event;
}
if (e.keyCode) {
code = e.keyCode;
}
else if (e.which) {
code = e.which;
}
if (code == 13) {
if (next_id)
{document.getElementById(next_id).focus(); }
else {
var inputList = document.getElementsByTagName("input");
// 循坏这个集合,包括了所有的input。
var nextindex;
nextindex = -1;
for (i = 0; i < inputList.length; i++) {
if (inputList[i] == document.activeElement) {
var acobj = document.activeElement;
nextindex = i + 1;
while ((!checkobjvisual(inputList[nextindex])) && (nextindex <= inputList.length)) {
nextindex = nextindex + 1;
}
if (inputList[nextindex]) inputList[nextindex].focus();
break;
}
}
}
}
}
document.onkeydown = function(e) {
var code;
if (!e) {
var e = window.event;
}
if (e.keyCode) {
code = e.keyCode;
}
else if (e.which) {
code = e.which;
}
if (code == 8) {
if (document.activeElement.readOnly == true || document.activeElement.disabled == true)
{ return false; }
}
if (code == 13) {
if (document.activeElement.type == "textarea") {
return;
}
if (document.activeElement.type != "submit" && document.activeElement.type != "button") {
hidediv();
// event.keyCode = 9;
focunext();
return false;
}
}
}
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var obj;
if (window.XMLHttpRequest) { //Mozilla 浏览器
obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return obj;
}
//当输入框的内容变化时,调用该函数
function searchSuggest(target_id, DropUP_id, strurl) {
var inputField = document.getElementById(target_id);
var suggestText = document.getElementById(DropUP_id);
var url = strurl + "?searchText=" + escape(inputField.value);
ajax_search(target_id, DropUP_id, url);
}
//当输入框的内容变化时,调用该函数
//strurl包含收索的
function ajax_search(target_id, DropUP_id, strurl) {
div_index = -1;
var inputField = document.getElementById(target_id);
var suggestText = document.getElementById(DropUP_id);
var search_txt;
search_txt = inputField.value;
if (search_txt.length <= 0) {
var str_index = strurl.indexOf("=");
if (str_index > 0)
search_txt = strurl.substring(str_index + 1);
}
if (search_txt.length > 0) {
var o = createXMLHttpRequest();
///
// var url = strurl + "?searchText=" + escape(inputField.value);
var url = strurl + "&hehe=" + Math.ceil(Math.random() * 1000);
o.open("GET", url, true);
o.onreadystatechange = function() {
if (o.readyState == 4) {
if (o.status == 200) {
var sourceText = o.responseText.split("\n");
if (sourceText.length > 1) {
suggestText.style.left = getAbsoluteLeft(inputField).toString() + "px" ;
suggestText.style.top = (getAbsoluteTop(inputField) + inputField.clientHeight).toString() + "px" ;
suggestText.style.display = "";
suggestText.innerHTML = "";
for (var i = 0; i < sourceText.length - 1; i++) {
var s = '<div id="divsel' + i.toString() + '" οnmοuseοver="javascript:suggestOver(this);"';
s += ' οnmοuseοut="javascript:suggestOut(this);" ';
s += ' οnclick="javascript:setSearch(this);" ';
chr_index = sourceText[i].indexOf("=");
if (chr_index <= 1) {
s += ' class="suggest_link">' + sourceText[i] + '</div>';
}
else {
var strname;
var strvaue;
strname = sourceText[i].substring(0, chr_index);
strvaue = sourceText[i].substring(chr_index + 1);
s += ' class="suggest_link">' + strname + '</div>';
//值
s += ' <div id="divvalue' + i.toString() + '" style="display:none" >' + strvaue + '</div>';
}
suggestText.innerHTML += s;
}
}
else {
suggestText.style.display = "none";
}
}
}
}; //指定响应函数
o.send(null); // 发送请求
}
else {
suggestText.style.display = "none";
}
}
function o_keyup(target_id, DropUP_id, strurl, bool_state, value_id) {
var b_refreash
var strid
var valueid
var div = document.getElementById(str_DropUp_id);
str_target_id = target_id;
str_DropUp_id = DropUP_id;
str_value_id = value_id;
b_refreash = true;
if (event != null) {
if (event.keyCode == 9) //回车
{
b_refreash = false;
hidediv();
return;
}
if (event.keyCode == 13) //回车
{
b_refreash = false;
hidediv();
event.keyCode = 9;
return;
}
if (event.keyCode == 37) //左
{
b_refreash = false;
}
if (event.keyCode == 38) //上
{
b_refreash = false;
strid = "divsel" + div_index;
valueid = "divvalue" + div_index;
if (document.getElementById(strid)) {
document.getElementById(strid).className = "suggest_link";
}
div_index = div_index - 1;
if (div_index < 0) div_index = -1;
strid = "divsel" + div_index;
valueid = "divvalue" + div_index;
if (document.getElementById(strid)) {
if (div.style.display != "none")
document.getElementById(target_id).value = document.getElementById(strid).innerHTML;
if (document.getElementById(valueid)) {
div_sel_value = document.getElementById(valueid).innerHTML;
if (document.getElementById(str_value_id))
document.getElementById(str_value_id).value = div_sel_value;
}
document.getElementById(strid).className = "suggest_link_over";
}
//document.getElementById("divsel1").innerHTML = "kk";
}
if (event.keyCode == 39) //右
{
b_refreash = false;
}
// alert(event.keyCode);
if (event.keyCode == 40) //下
{
b_refreash = false;
if (div_index > 10) div_index = 10;
strid = "divsel" + div_index;
valueid = "divvalue" + div_index;
if (document.getElementById(strid)) {
document.getElementById(strid).className = "suggest_link";
}
div_index = div_index + 1;
strid = "divsel" + div_index;
valueid = "divvalue" + div_index;
if (document.getElementById(strid)) {
if (div.style.display != "none")
document.getElementById(target_id).value = document.getElementById(strid).innerHTML;
if (document.getElementById(valueid)) {
div_sel_value = document.getElementById(valueid).innerHTML;
if (document.getElementById(str_value_id))
document.getElementById(str_value_id).value = div_sel_value;
}
document.getElementById(strid).className = "suggest_link_over";
}
}
}
if (b_refreash) {
if (bool_state) {
searchSuggest(target_id, DropUP_id, strurl);
}
else {
ajax_search(target_id, DropUP_id, strurl);
}
}
}
//每次输入框按键触发
function obj_keyup(target_id, DropUP_id, strurl, value_id) {
o_keyup(target_id, DropUP_id, strurl, true, value_id);
}
//直接以strurl的内容触发
function obj_keyup2(target_id, DropUP_id, strurl, value_id) {
o_keyup(target_id, DropUP_id, strurl, false, value_id);
}
function suggestOver(div_value) {
div_value.className = "suggest_link_over";
div_mouseover = true;
}
function suggestOut(div_value) {
div_value.className = "suggest_link";
div_mouseover = false;
}
function setSearch(obj) {
document.getElementById(str_target_id).value = obj.innerHTML;
var divid;
divid = obj.id;
var str_index = divid.substring(("divsel").length);
var o_id = "divvalue" + str_index;
var odiv = document.getElementById(o_id);
if (odiv != null) {
div_sel_value = odiv.outerText
if (document.getElementById(str_value_id)) {
document.getElementById(str_value_id).value = div_sel_value;
}
//alert(div_sel_value);
}
hidediv();
}
function hidediv() {
var div = document.getElementById(str_DropUp_id);
//
if (div) {
div.style.display = "none";
div.innerHTML = "";
}
}
function tbblur() {
if (!div_mouseover)
hidediv();
}