JavaScript-输入揭示效果-JavaSript-爱易网页

JavaScript-输入揭示效果

日期：2014-05-16　浏览次数：20366 次

JavaScript-输入提示效果
参考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;
                                //	}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript-输入揭示效果

相关资料更多>

推荐阅读更多>