发帖问“hch126163 老胡”一个js的问题，有兴趣的也进来看一下啊

http://blog.csdn.net/cj205/archive/2011/03/25/6277208.aspx

我看了你的这个链接
看不到什么效果啊。
http://blog.csdn.net/cj205/archive/2011/03/25/6277208.aspx

汗可怕的csdn blog
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>智能填写</title>
            <style type="text/css" >
#multiinput {
                    font-size:22px;
                    border:1px #000 solid;
                    font-weight:700;
                }
                #newInput {
                    height:24px;
                    font-size:22px;
                    border:none;
                }
                #selection ul {
                    margin:0;
                    padding:0;
                    border:1px solid #000;
                    width:75px;
                    border-top:0;
                }
                #selection li {
                    list-style:none;
                    margin:0;
                    padding:0;
                    height:24px;
                    cursor:pointer;
                    width:75px;
                }
                #multiinput a:hover  {
                    background-color:#eee;
                    cursor:text;
                }
                li.selected {
                    background-color:#eee;
                }
            </style>
            <script charset="UTF-8" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript">
                var str = ['张学友','张信哲','刘德华','孙燕姿','周杰伦','张含韵','许飞','许巍','张宇','周星驰','唐朝乐队','迪克牛仔','郑伊健','陈小春','汪峰'];
                $(function(){
                    //输入框获得焦点时
    $("#newInput").focus(function(){
                        var textStr = ["<ul>"];
   for(var i = 0; i < str.length; i++){
                            textStr.push('<li>' + str[i] + '</li>');
                        }
                        textStr.push("</ul>");
                        textStr = textStr.join('');
                        $("#selection").show().empty().append(textStr);
                    })
                    //输入框失去焦点时
                    .blur(function(e){
                        $("#selection").hide();
                    })
                    //按键按下时
                    .keydown(function(e){
                        if(e.keyCode == 8 && $(this).val().length == 0) {
                            $(this).prev().remove();
                        } else if(e.keyCode == 40) {
                            move(true);
                        }   else if(e.keyCode == 38) {
                            move(false);
                        } else if(e.keyCode == 13) {
                            $('<a>' + $('.selected').text() + ';</a>').insertBefore('#newInput');
                            $('#newInput').val('').focus();
                        }
                    })
                    //按键弹出时，进行搜索匹配。
                    .keyup(function(e){
                        if(e.keyCode == 40 || e.keyCode == 8 || e.keyCode == 38)
                            return;
                        var textStr = $(this).val();
                        var reg = new RegExp('(?=[^@]+)[^@]*' + textStr + '[^@]*(?=@|$)','g');
                        var arr = str.join("@").match(reg) || [];
                        textStr = ['<ul>'];
                        for(var i = 0; i < arr.length; i++) {
                            textStr.push('<li>' + arr[i] + '</li>');
                        }
                        textStr.push('</ul>');
                        textStrtextStr = textStr.join('');
                        $("#selection").empty().show().append(textStr);
                    });
                    //li的背景效果
                    $("#selection li").live("mouseover",function(){
                        $(this).siblings().removeClass('selected').end().addClass('selected');
                    })
                    //li的选中事件
                    .live("mousedown",function(){
                        $('<a>' + $(this).text() + ';</a>').insertBefore("#newInput");
                        $("#newInput").val('').focus();
                    });

                    $("#multiinput a").live('dblclick',function(){
                        $(this).remove();
                    });
                });
                function move(down) {
                    var selected = $('.selected');
                    if(down) {
                        if(selected.length == 0) {
                            $('#selection li:first').addClass('selected');
                        } else {
                            selected.removeClass('selected').next().addClass('selected');
                        }
                    } else {
                        if(selected.length == 0) {
                            $('#selection li:last').addClass('selected');
                        } else  {
                            selected.removeClass('selected').prev().addClass('selected');
                        }
                    }
                }

    </script>
        </head>
        <body>
            <div id="multiinput">
                <a id="t"></a><input id="newInput" type="text" autocomplete="off"/>
            </div>
            <div>
                <div id="selection">
                </div>
            </div>
        </body>
    </html>

我不是很擅长css.今天早上百度了一下，清楚浮动。设置IE6，文字不换行。达到了想要的效果了！我只测试了IE6和火狐！楼主自己调整css吧！<!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>js 文本框效果</title>
<style type="text/css">
.inputs{width:600px;height:auto; border:1px solid #ddd;margin:100px auto;line-height:20px;}
.divInputs{width:auto;height:auto;line-height:20px;min-height:20px; }
.divHistory{height:20px;width:auto;line-height:20px;float:left;display:inline; margin:0px 3px; background-color:#dee;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */}
.clear{clear:both;} </style>
</head>
<body><div class="inputs" id='inputs'>
<div class="divInputs" id='divInputs'>
<input  type='text' value="" style="float:left;border:0px;height:20px; " id='txtInput'/>
<div class='clear'></div>
</div>
</div>
<input  type='button' value="查看设置的值" id="btn"/>
</body>
<script type="text/javascript">window.onload=function()
{
   var inputs=[];
   var txtInput = document.getElementById("txtInput");
   var divInputs = document.getElementById("divInputs");
   document.getElementById("btn").onclick=function(){
    alert(inputs);
   } ;

   document.getElementById("inputs").onclick=function(){
        txtInput.focus();
   } ;
   txtInput.onkeydown=function(e)
   {
        e=e||event;
        if(e.keyCode==13){ // 回车
            var input = txtInput.value.trim();
            if(input==""){
                return;
            }
            if(inputs.indexOf(input)>-1){
                alert("内容已存在");
                return;
            }
            var div = document.createElement("div");
            div.innerHTML ="<span>" +input+"</span>";
            div.className="divHistory";
            var span = document.createElement("span");
            span.style.cssText ="top:0px;right:0px;position:relative;z-index:99999;font-size:12px; border:1px solid red;";
            span.innerHTML="X";
            div.appendChild(span);
            divInputs.insertBefore(div,txtInput);
            inputs.push(input);
            txtInput.value ="";
            span.onclick=function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
                inputs.remove(input);
            };
        }
   };
};
String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g,'');
};
Array.prototype.indexOf=function(value){
    if(this!=null && this.length>0){
        for(var i=0;i<this.length;i++)
        {
            if(this[i]==value){ return i;}
        }
    }
    return -1;
};
Array.prototype.removeAt=function(index){
this.splice(index,1);
}
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if (index>=0){
this.removeAt(index);
}
}
</script>
</html>

调试易

发帖问“hch126163 老胡”一个js的问题，有兴趣的也进来看一下啊

解决方案 »