关于一个js下拉框的问题

yuri09 2009-06-13 11:29:47

<script language="javascript" type="text/javascript">
String.prototype.trim = function() {
return this.replace(new RegExp("(^[\\s]*)|([\\s]*$)", "g"), "");
};
var surl = "";
function ShowSuggest(objInputText, Surl) {
surl = Surl;
objInputText.onkeyup = ControlSuggest;
objInputText.onblur = RemoveSuggest;
var oldValue = objInputText.parentElement.getElementsByTagName("h6")[0];
function ControlSuggest() {
var ie = (document.all) ? true : false;
if (ie) {
var keycode = event.keyCode;
if (keycode == 40) {//向下
ChangeSelection(false);
return;
}
if (CheckSuggest()) {
if (keycode == 38) {//向上
ChangeSelection(true);
return;
}
if (keycode == 13) {//回车
RemoveSuggest();
return;
}
if (keycode == 46) {//del
DeleteSuggest();
objInputText.value = oldValue.innerText;
oldValue.innerText = "";
return;
}
if ((keycode >= 16 && keycode <= 36) || (keycode >= 41 && keycode <= 47)) {
return;
}
}
CreateSuggest();
}
}
//删除提示前对文本做相关操作
function RemoveSuggest() {
if (CheckSuggest()) {
var panelSuggest = document.getElementById("divSuggestPanel");
var inputIndex = document.getElementById("inputIndex");
if (CheckActiveElement(panelSuggest) || event.keyCode == 13) {
var selectIndex = Number(inputIndex.value);
if (selectIndex >= 0) {
var tb = panelSuggest.getElementsByTagName("table")[0];
objInputText.value = tb.rows[selectIndex].cells[0].innerText;
}
}
else {
objInputText.value = oldValue.innerText;
}
document.body.removeChild(inputIndex);
document.body.removeChild(panelSuggest);
oldValue.innerText = "";
}
else {
return;
}
}
//删除提示的方法,不对文本做任何操作
function DeleteSuggest() {
if (CheckSuggest()) {
var panelSuggest = document.getElementById("divSuggestPanel");
var inputIndex = document.getElementById("inputIndex");
document.body.removeChild(inputIndex);
document.body.removeChild(panelSuggest);
}
}
//加载提示框
//var suggestList;
function CreateSuggest() {
//提示框存在,而且文本框值与上次的输入不同时,才进行下面的加载工作
if (CheckSuggest()) {
if (oldValue.innerText.trim() == objInputText.value.trim()) {
return;
}
else {
DeleteSuggest();
}
}
if (CheckSuggest() && objInputText.value.trim().length == 0) {//提示框存在,但是文本框没有内容,这时删除提示框
DeleteSuggest();
oldValue.innerText = "";
return;
}
//如果输入为空格,就退出
if (objInputText.value.trim().length == 0) {
return;
}
//从数据源中取数据
var suggestList = GetSuggestList();
if (suggestList == null || suggestList.length < 1) {//对传入的数组进行判断,为空或者列表为0就退出
DeleteSuggest(); //开始的输入有提示,后面的输入可能没有提示,所以数据源为空时要尝试删除提示
oldValue.innerText = "";
return;
}
oldValue.innerText = objInputText.value; //以上条件都符合,根据数据源来创建数据

var inputIndex = document.createElement("input"); //用隐藏控件来做索引的保存
inputIndex.type = "hidden";
inputIndex.id = "inputIndex";
inputIndex.value = -1;
var suggest = ""; //根据数据源来写div提示信息
suggest += "<table>";
for (var nIndex = 0; nIndex < suggestList.length; nIndex++) {
suggest += "<tr onmouseover=\" for(var n=0;n<this.parentElement.rows.length;n++){this.parentElement.rows[n].className='trmouseout';};this.className='trmouseover';var inputIndex = document.getElementById('inputIndex');inputIndex.value = this.rowIndex; \" onmouseout=\"this.className='trmouseout';\" ><td>";
suggest += suggestList[nIndex];
suggest += "</td></tr>";
}
suggest += "</table>";
var panelSuggest = document.createElement("div"); //创建装提示框的容器div

panelSuggest.id = "divSuggestPanel";
panelSuggest.className = "pnlSuggest"; //设置对象的类
panelSuggest.style.width = objInputText.clientWidth + "px"; //设置对象的宽度,与文本框宽度相同
panelSuggest.style.top = (GetPosition()[0] + objInputText.offsetHeight + 1) + "px";
panelSuggest.style.left = GetPosition()[1] + "px";
panelSuggest.innerHTML = suggest;
document.body.appendChild(panelSuggest); //把提示框和索引控件添加进来
document.body.appendChild(inputIndex);
}
//更换选项
function ChangeSelection(isup) {
//按向下创建提示
if (!CheckSuggest() && objInputText.value.trim().length != 0 && !isup) {//文本框有内容,提示不存在,向下
CreateSuggest();
return;
}
if (CheckSuggest()) {
var inputIndex = document.getElementById("inputIndex"); //得到索引的值
var selectIndex = Number(inputIndex.value);
var panelSuggest = document.getElementById("divSuggestPanel"); //得到提示框
var tb = panelSuggest.getElementsByTagName("table")[0];
var maxIndex = tb.rows.length - 1; //提示信息的最大索引

if (isup) {//向上
if (selectIndex >= 0) //索引不能为负
{
tb.rows[selectIndex].className = "trmouseout";
selectIndex--;
if (selectIndex >= 0) {
tb.rows[selectIndex].className = "trmouseover";
}
}
}
else {
if (selectIndex < maxIndex) //大于等于最大索引就不做任何操作
{
if (selectIndex >= 0) {
tb.rows[selectIndex].className = "trmouseout";
}
selectIndex++;
tb.rows[selectIndex].className = "trmouseover";
}
}
inputIndex.value = selectIndex;
if (selectIndex >= 0) {
objInputText.value = tb.rows[selectIndex].cells[0].innerText;
}
else {
objInputText.value = oldValue.innerText;
}
}
}
//判断活动对象是否为obj对象的从属对象
function CheckActiveElement(obj) {
var isAe = false;
var objtemp = document.activeElement;
while (objtemp != null) {
if (objtemp == obj) {
isAe = true;
break;
}
objtemp = objtemp.parentElement;
}
return isAe;
}
//检查提示框是否存在
function CheckSuggest() {
var panelSuggest = document.getElementById("divSuggestPanel");
if (panelSuggest == null) {
return false;
}
else {
return true;
}
}
//获取文本框的位置
function GetPosition() {
var top = 0, left = 0;
var obj = objInputText;
do {
top += obj.offsetTop; //距离顶部
left += obj.offsetLeft; //距离左边
}
while (obj = obj.offsetParent);
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}

//得到提示数据
function GetSuggestList() {
var intIndex = 0; suggestList = new Array();
var dataoptions = objInputText.parentElement.getElementsByTagName("option");
var inputtxt = objInputText.value;
//var url = "AdvSearchAjax.aspx?names=" + escape(inputtxt);
var url = surl + escape(inputtxt);
// for (var n = 0; n < dataoptions.length; n++) {
// if (dataoptions[n].text.indexOf(inputtxt) > -1) {
// suggestList[intIndex++] = "test" + n ; //dataoptions[n].text;
// }
// }

for (var n = 0; n < dataoptions.length; n++) {
suggestList[intIndex++] = inputtxt + n
}

return suggestList;
}

}
</script>

...全文
192 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiongsai006 2012-06-08
  • 打赏
  • 举报
回复
再等等吧,这个有点深奥哦,亲。
yuri09 2009-06-15
  • 打赏
  • 举报
回复
.....这么久的帖怎么没人回答的。
yuri09 2009-06-13
  • 打赏
  • 举报
回复
怎么没人回答的呢?
evaa006 2009-06-13
  • 打赏
  • 举报
回复
ding
yuri09 2009-06-13
  • 打赏
  • 举报
回复
以上是的是js代码,高手帮我看看,改两个bug
下面是控件
 <asp:TextBox ID="txtIndex" runat="server" Width="500px" name="txtInput"  onkeydown="ShowSuggest(this,'XX.xml');"  autocomplete="off"></asp:TextBox>


问题有点急。那位老大帮我解决一下。
问题1
输入一个是空格没有反应.
问题2
鼠标划过,然后点另他地方拿到的值是有问题

110,533

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧