JavaScript实现自动完成功能

用的web控件，一个文本框，一个listbox（规定不能用div）
当在文本框输入时，listbox出现匹配的结果，类似google搜索框的联想输入
单击listbox选项的时候，把单击项的内容填到文本框中问题就出在这单击事件里了，
1、输入字母a的时候，能正常联想（图1）；
2、单击某一项，listbox被清空了，伤心（图2）；
3、再次输入a，listbox的内容又回来了（图3）；
4、单击某一项，可以把单击项的内容填充到文本框中；再输入a，goto step1……
反正会一直重复以上4步，找不到理由啊，特来csdn向各位大虾请教图1
图2
图3
图4
以下是JavaScript代码//显示listbox
function showLstbox()
{
    var txtBox = window.document.getElementById("TextBox1");
    var lstBox = window.document.getElementById("ListBox1");
    var strInput = txtBox.value;
    var arrMatch = new Array();//用以匹配的字符串数组
    var strMatch; //匹配成功的字符串
    arrMatch = ["1111", "aaa", "klkk1", "akl1", "2222a", "ccc","南昌","南昌市高新区"];
    removeAll("ListBox1")
    for (var i = 0; i < arrMatch.length; i++)
    {
        strMatch = arrMatch[i];
        if (strMatch.indexOf(strInput) >= 0)
        {

            var opt = document.createElement("OPTION");
            opt.text = arrMatch[i].toString();
            opt.value = arrMatch[i];
            lstBox.add(opt);
        }
    }
    if (lstBox.hasChildNodes())
    {
        lstBox.style.display = "block"; //显示
    }
    else
    {
        lstBox.style.display = "none";//隐藏
    }
}
//将id为listId的列表中的内容全部移除
function removeAll(listId)
{
    var lst = window.document.getElementById(listId);
    var length = lst.options.length;
    for (var i = length; i > 0; i--)
    {
        lst.options[i - 1].parentNode.removeChild(lst.options[i - 1]);
    }
}
//将listbox中选中项的内容复制到文本框中
function moveSelect() {
    var txtBox = window.document.getElementById("TextBox1");
    var lstBox = window.document.getElementById("ListBox1");
    var length = lstBox.options.length;
    for (var i = 0; i < length; i++)
    {
        var lstindex = lstBox.selectedIndex;
        if (lstindex < 0)
            return;
        txtBox.value = lstBox.options[lstindex].text;
    }
    //复制完成后隐藏listbox
    lstBox.style.display = "none";
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

图全挂掉了顺便把HTML也放上来比较好
好像csdn不能上传本地图片的？其他地方又打击盗链的，赶尽杀绝啊
图全部在这里http://hi.baidu.com/hlicon/album/%C4%AC%C8%CF%CF%E0%B2%E1
1、2、3、4四张便是以下是html<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %><%@ Register Assembly="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.3.1.1850, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"
    Namespace="ESRI.ArcGIS.ADF.Web.UI.WebControls" TagPrefix="esri" %><!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>
    <script type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <form id="form1" runat="server" >

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="border-color: #FF00FF; border-width: 2px; width: 80%;"
                    bgcolor="#00C6FF">
                    <tr>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" Width="212px"></asp:TextBox>
                            <br />
                            <asp:ListBox ID="ListBox1" runat="server" Width="214px" onClick="moveSelect();">
                            </asp:ListBox>
                            <br />
                        </td>
                    </tr>
                </table>
                <br />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <script type="text/javascript" language="javascript">
        var lstbox = document.getElementById("ListBox1");
        lstbox.style.display = "none"; // 隐藏
    </script>

    </form>
</body>
</html>
再以下是页面cs文件using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.TextBox1.Attributes.Add("onKeyup", "showLstbox();");

    }
}
试试看<script>
function showLstbox()
{
    var txtBox = window.document.getElementById("TextBox1");
    var lstBox = window.document.getElementById("ListBox1");
    var strInput = txtBox.value;
    var arrMatch = new Array();//用以匹配的字符串数组
    var strMatch; //匹配成功的字符串
    arrMatch = ["1111", "aaa", "klkk1", "akl1", "2222a", "ccc","南昌","南昌市高新区"];
    removeAll("ListBox1")
    for (var i = 0; i < arrMatch.length; i++)
    {
        strMatch = arrMatch[i];
        if (strMatch.indexOf(strInput) >= 0)
        {

            var opt = document.createElement("OPTION");
            opt.text = arrMatch[i].toString();
            opt.value = arrMatch[i];
            lstBox.add(opt);
        }
    }
    if (lstBox.hasChildNodes())
    {
        lstBox.style.display = "block"; //显示
    }
    else
    {
        lstBox.style.display = "none";//隐藏
    }
}
//将id为listId的列表中的内容全部移除
function removeAll(listId)
{
    var lst = window.document.getElementById(listId);
    var length = lst.options.length;
    for (var i = length; i > 0; i--)
    {
        lst.options[i - 1].parentNode.removeChild(lst.options[i - 1]);
    }
}
//将listbox中选中项的内容复制到文本框中
function moveSelect() {
    var txtBox = window.document.getElementById("TextBox1");
    var lstBox = window.document.getElementById("ListBox1");
    var length = lstBox.options.length;
    for (var i = 0; i < length; i++)
    {
        var lstindex = lstBox.selectedIndex;
        if (lstindex < 0)
            return;
        txtBox.value = lstBox.options[lstindex].text;
    }
    //复制完成后隐藏listbox
    lstBox.style.display = "none";
}</script>
<input type="text" id="TextBox1" onkeyup="showLstbox()">
<select id="ListBox1" size="10" onclick="moveSelect()" style="display:none;"></select>
to 5楼：
  果然可以，为什么web控件就不行呢？非得要HTML的
不知道怎么把后台里的值传给JavaScript中的arrMatch
在后台拼接成字符串,然后在前台输出
C#:
protected string str = "[...]";HTML:
arrMatch = <%=str%>;
javascript是客户端语言用服务器端的当然不行了你点击之后都丢失了
之前写的：http://download.csdn.net/source/1198273
http://www.javaeye.com/topic/202492
http://www.cnblogs.com/oloen/archive/2009/03/17/1413959.html
呃  Email：licon#live.cn