JavaScript-输入提示效果-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10144/article/details/82033308
本文介绍了一个自动提示输入框的功能实现方法，支持连续输入多个关键字并自动完成建议。通过JavaScript和HTML结合使用，实现了对用户输入内容的实时反馈，提高了用户体验。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
参考cssrain.cn上的一个demo,做了些修改，支持连续输入

[img]
http://dl.iteye.com/upload/attachment/435112/ee8f1c67-04e4-3a2c-b71f-692d12ff66e4.png
[/img]

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>自动提示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type = "text/javascript">

    //update 2010-07-06
    //增加可以连续输入多个，中间用逗号分开
    /***********************************************
     * Global variables
     ***********************************************/
    var maxResults = 10;	// max # of results to display
    var ignoreKeys = "";        //设置忽略的关键字
    var sMultiply =false;       //是否可以连续输入

    /***********************************************
     * Prototype for populating data
     ***********************************************/
    function get_data() {}

    /***********************************************
     * Find search keys in data set
     ***********************************************/
    function suggest(keywords,key,inputID,dataID,multiply)
    {
        var results = document.getElementById("results");
        sMultiply = multiply;
        var theinput=null;
        if(sMultiply){
            //keywords =keywords.toString();
            //将input的内容用split截取成数组,最多返回1000个
            theinput =keywords.split(",", 1000);
            //当输入为多个时只需要匹配最后一
            if(theinput.length>=1){

                keywords =theinput[theinput.length-1];
            }
        }else{
            keywords =keywords.toString();
        }
        if(keywords != "")
        {
            //获得数据
            var terms = get_data(dataID); // sort? -- data should be alphabetical for best results

            var ul = document.createElement("ul");
            var li;
            var a;

            if ((key.keyCode == '40' || key.keyCode == '38' || key.keyCode == '13'))
            {
                navigate(key.keyCode,theinput,inputID);
            }
            else
            {
                var kIndex = -1;

                for(var i = 0; i < terms.length; i++)
                {
                    kIndex = terms[i].activity.toLowerCase().indexOf(keywords.toLowerCase());

                    if(kIndex == 0)
                    {
                        li = document.createElement("li");

                        // setup the link to populate the search box
                        a = document.createElement("a");
                        a.href = "javascript://";

                        a.setAttribute("rel",terms[i].val);
                        a.setAttribute("rev", getRank(terms[i].activity.toLowerCase(), keywords.toLowerCase()));

                        //if(!document.all) a.setAttribute("onclick","populate(this,theinput);");
                        //else
                        //鼠标点击选中li进行提交
                        a.onclick = function() { populate(this,theinput,inputID); }

                        a.appendChild(document.createTextNode(""));

                        if(keywords.length == 1)
                        {
                            var kws = terms[i].activity.toLowerCase().split(" ");
                            var firstWord = 0;

                            for(var j = 0; j < kws.length; j++)
                            {
                                //	if(kws[j].toLowerCase().charAt(0) == keywords.toLowerCase()) {

                                ul.appendChild(li);

                                if(j != 0) {
                                    kIndex = terms[i].activity.toLowerCase().indexOf(" " + keywords.toLowerCase());
                                    kIndex++;
                                }

                                break;
                                //	}
                            }
                        }
                        else if(keywords.length > 1) {
                            ul.appendChild(li);
                        }
                        else continue;


                        var before = terms[i].activity.substring(0,kIndex);
                        var after = terms[i].activity.substring(keywords.length + kIndex, terms[i].activity.length);

                        //a.innerHTML = before + "<strong>" + keywords.toLowerCase() + "</strong>" + after;
                        var middle = terms[i].activity.substring(kIndex,keywords.length+kIndex);
                        a.innerHTML = before + "<strong>" +middle + "</strong>" + after;
                        li.appendChild(a);

                    }
                }

                if(results.hasChildNodes()) results.removeChild(results.firstChild);

                // position the list of suggestions
                var s = document.getElementById(inputID);
                var xy = findPos(s);

                results.style.left = xy[0] + "px";
                results.style.top = xy[1] + s.offsetHeight + "px";
                results.style.width = s.offsetWidth + "px";

                // if there are some results, show them
                if(ul.hasChildNodes()) {
                    results.appendChild(filterResults(ul));

                    if(results.firstChild.childNodes.length == 1) results.firstChild.firstChild.getElementsByTagName("a")[0].className = "hover";

                }

            }
        }
        else
        {
            if(results.hasChildNodes()) results.removeChild(results.firstChild);
        }
    }

    /***********************************************
     * Rank results - used for sorting result sets
     * 0 if entire row starts with kw
     * 0 < i < 1 if any word in row starts with kw (1k char max)
     * i > 1 if row contains kw anywhere else
     ***********************************************/
    function getRank(activity, keywords)
    {
        var ret = -1;
        var kIndex = activity.indexOf(keywords);

        ret = (activity.charAt(kIndex - 1) == " ") ? kIndex : (200*kIndex);

        return ret;
    }

    /***********************************************
     * Sort the result suggestion sets
     ***********************************************/
    function filterResults(s)
    {
        var sorted = new Array();

        for(var i = 0; i < s.childNodes.length; i++)
        {
            sorted.push(s.childNodes[i]);
        }

        var ul = document.createElement("ul");
        var lis = sorted.sort(sortIndex);

        for(var j = 0; j < lis.length; j++)
        {
            if(j < maxResults) ul.appendChild(lis[j]);
            else break;
        }

        return ul;

    }

    function sortIndex(a,b)
    {
        // wow thats ugly -- need logic around grouped items getting out of order
        return (a.getElementsByTagName("a")[0].rev - b.getElementsByTagName("a")[0].rev);
    }


    /***********************************************
     * Navigate using up/down and submit with 'Enter'
     ***********************************************/
    function navigate(key,theinput,inputID)
    {
        var results = document.getElementById("results");
        var keyIndex = document.getElementById("keyIndex");

        var i = keyIndex.value;

        if(i == "" || !i) i = -1;
        else i = parseFloat(i);

        var ul = results.childNodes[0];

        if(ul)
        {
            if(key == '40') // DOWN
            {
                i++;
                if(i > ul.childNodes.length-1) i = ul.childNodes.length-1;

                keyIndex.value = i;

                try {
                    ul.childNodes[i].getElementsByTagName("a")[0].className = "hover";
                    ul.childNodes[i-1].getElementsByTagName("a")[0].className = "";
                }
                catch(e) {}
            }
            else if(key == '38') // UP
            {
                i--;
                if(i <= 0) i = 0;

                keyIndex.value = i;

                try {
                    ul.childNodes[i].getElementsByTagName("a")[0].className = "hover";
                    ul.childNodes[i+1].getElementsByTagName("a")[0].className = "";
                }
                catch(e) {}
            }
            else if(key == '13' || key == '9') // ENTER/TAB -- POPULATE
            {
                if(i == -1) i = 0;
                populate(ul.childNodes[i].getElementsByTagName("a")[0],theinput,inputID);
            }
            else return;
        }
    }

    /***********************************************
     * Allow for using tab onkeydown
     ***********************************************/
    function tabfix(keywords, key)
    {
        if(key.keyCode == '9') {
            navigate(key.keyCode);
            return false;
        }
        else return true;
    }

    /***********************************************
     * Populate hidden fields via onclick on 'Enter'
     ***********************************************/
    function populate(a,theinput,inputID)
    {
        var ul = document.getElementById("results").childNodes[0];
        var inputold="";
        var inputObj =document.getElementById(inputID);
        var pick;
        try {
            if(theinput != null){
                pick = a.innerHTML.replace("<strong>","").replace("</strong>","")+",";

                // IE6 converts HTML elements to uppercase -- could be done with RegExp
                if(document.all) pick = a.innerHTML.replace("<STRONG>","").replace("</STRONG>","")+",";

                if(theinput.length>=1){
                    //多项输入时要用到
                    //重新将当前输入值前的值添加到input标签里
                    for(var i=0; i<theinput.length-1;i++){
                        inputold=inputold+theinput[i]+",";
                        //alert("the input:"+i+theinput[i]);
                        // alert("the input old:"+inputold);
                    }

                }
                //添加新配置的值
                inputObj.value=inputold+pick;
                //alert("jdl");
                //alert("inputlength:"+theinput.length);
                //document.getElementById("s").value = pick;
            }else{
                pick = a.innerHTML.replace("<strong>","").replace("</strong>","");

                // IE6 converts HTML elements to uppercase -- could be done with RegExp
                if(document.all) pick = a.innerHTML.replace("<STRONG>","").replace("</STRONG>","");
                inputObj.value=pick;
            }
        }
        catch(e) {}


        clearSuggest();
    }

    /***********************************************
     * Find an elements position on the screen
     ***********************************************/
    function findPos(obj)
    {
        var curleft = curtop = 0;
        if (obj.offsetParent) {
            curleft = obj.offsetLeft
            curtop = obj.offsetTop
            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
            }
        }
        return [curleft,curtop];
    }

    /***********************************************
     * Helper to preserve onclick on suggestions
     ***********************************************/
    function clearSuggest()
    {
        // need a timeout so the onclick event is captured before results are hidden
        setTimeout("hideSuggest()",200);  //time setѡ  ʱ
    }

    /***********************************************
     * Hide the suggestions list and remove from DOM
     ***********************************************/
    function hideSuggest()
    {
        var results = document.getElementById("results");
        if(results.hasChildNodes()) results.removeChild(results.firstChild);

        document.getElementById("keyIndex").value = "-1"; // reset the suggestions index
    }

    // get list values;
    function getListvalues(listID)
    {
        var options = this.getOptions(listID);
        var values = new Array();
        //alert("options length:"+options.length);
        for (var i = 0; i < options.length; i++)
        {
            var flag = true;
            for(var j=0; j<values.length; j++){
                if(values[j] == options[i].innerText){
                    flag = false;
                    break;
                }
            }

            if(flag){
                values.push(options[i].innerText);
            }
        }
        // alert("values length"+values.length);
        return values;

    }


    function get_data(dataID )
    {
        var terms = new Array();
        // var values2 = getListvalues("fromLocation_ces");
       //获取其它控件的值放入数组中
      /* var values2 = getListvalues(dataID);
        for(var i=0;i<values2.length;i++){
            terms.push({val:1,activity:values2[i]});
        } */


        //alert("from location list values size:"+values2.length);
        //  alert("values2[0]"+values2[0]);
        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

       for(var i=0;i<months.length;i++){
            terms.push({val:1,activity:months[i]});
        }
        return terms;

    }
</script>

    <style type = "text/css">

.nodisplay {
	display: none;
}

label {
	float: left;
	font: normal 12px Arial;
	width: 80px;
}

#s {
	width: 300px;
}

#results {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
}

#results ul {
	border: 1px solid #bfbfbf;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#results ul li {
  text-align:left;
}

#results ul li a {
	display: block;
	color: #444;
	background: #fff;
	font: normal 12px arial;
	text-decoration: none;
	padding: 1px 4px 2px 6px;
}

* html #results ul li a {
	width: 100%;
}

#results ul li a strong {
	color: red;
}

#results ul li a:hover, #results ul li a.hover {
	background: #0056f4;
	color: #fff;
}

#results ul li a:hover strong, #results ul li a.hover strong {
	color: #fff;
}

</style>

  </head>
  <body>

      <!--参数设置为true 可以多选，中间用[,]隔开-->

      <input id="fromRetailGroup" type="text" onkeyup="suggest(this.value,event,this.id,'fromAndToRetailGroupList',false);" onkeydown="return tabfix(this.value,event);" onblur="clearSuggest();"  style="width:170px"/>

      <!--结果显示区域-->
		<p class="nodisplay">
			<label>kIndex</label>
			<input class="nodisplayd" type="text" id="keyIndex" />
		</p>
		<p class="nodisplay">
			<label>rev</label>
			<input class="nodisplayd" type="text" id="sortIndex" />
		</p>

		<div id="results"></div>

  </body>
</html>