javascript自动完成,最小长度为2

时间:2013-06-08 09:02:56

标签: javascript jquery

我想为minLength 2添加条件。

// global variables 
    var acListTotal   =  0;<br>
    var acListCurrent = -1;<br>
    var acDelay       = 500;<br>
    var acURL         = null;<br>
    var acSearchId    = null;<br>
    var acResultsId   = null;<br>
    var acSearchField = null;<br>
    var acResultsDiv  = null;<br>

    function setAutoCompleteto(field_id, results_id, get_url)
    {

        // initialize vars
        acSearchId  = "#" + field_id;
        acResultsId = "#" + results_id;
        acURL       = get_url;

        // create the results div
    $("#auto").append('<div id="' + results_id + '"></div>');



        // register mostly used vars
        acSearchField   = $(acSearchId);
        acResultsDiv    = $(acResultsId);

        // reposition div
        repositionResultsDiv();

        // on blur listener
        acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

        // on key up listener
        acSearchField.keyup(function (e) {

            // get keyCode (window.event is for IE)
            var keyCode = e.keyCode || window.event.keyCode;
            var lastVal = acSearchField.val();

            // check an treat up and down arrows
            if(updownArrow(keyCode)){
                return;
            }

            // check for an ENTER or ESC
            if(keyCode == 13 || keyCode == 27){
                clearAutoComplete();
                return;
            }

            // if is text, call with delay
            setTimeout(function () {autoComplete(lastVal)}, acDelay);
        });
    }

    // treat the auto-complete action (delayed function)
    function autoComplete(lastValue)
    {
        // get the field value
        var part = acSearchField.val();

        // if it's empty clear the resuts box and return
        if(part == ''){
            clearAutoComplete();
            return;
        }

        // if it's equal the value from the time of the call, allow
        if(lastValue != part &&    minLength > 1){
            return;
        }

        // get remote data as JSON
        $.getJSON(acURL + part, function (json) {
       minLength: 1
            // get the total of results
            var ansLength = acListTotal = json.length;

            // if there are results populate the results div
            if (ansLength > 0) {

                var newData = '';

                // create a div for each result
                for (i = 0; i < ansLength; i++) {
                    newData += '<div class="unselected">' + json[i] + '</div>';
                }

                // update the results div
                acResultsDiv.html(newData);
                acResultsDiv.css("display", "block");

                // for all divs in results
                var divs = $(acResultsId + " > div");

                // on mouse over clean previous selected and set a new one
                divs.mouseover(function () {
                    divs.each(function () { this.className = "unselected"; });
                    this.className = "selected";
                })

                // on click copy the result text to the search field and hide
                divs.click(function () {
                    acSearchField.val(this.childNodes[0].nodeValue);
                    clearAutoComplete();
                });

            } else {
                clearAutoComplete();
            }
        });
    }

    // clear auto complete box
    function clearAutoComplete()
    {
        acResultsDiv.html('');
        acResultsDiv.css("display","none");
    }

    // reposition the results div accordingly to the search field
    function repositionResultsDiv()
    {
        // get the field position
        var sf_pos    = acSearchField.offset();
        var sf_top    = sf_pos.top;
        var sf_left   = sf_pos.left;

        // get the field size
        var sf_height = acSearchField.height();
        var sf_width  = acSearchField.width();

        // apply the css styles - optimized for Firefox
        acResultsDiv.css("position","absolute");
        acResultsDiv.css("left", sf_left - 2);
        acResultsDiv.css("top", sf_top + sf_height + 4);
        acResultsDiv.css("width", sf_width - 2);
    }


    // treat up and down key strokes defining the next selected element
    function updownArrow(keyCode) {
        if(keyCode == 40 || keyCode == 38){

            if(keyCode == 38){ // keyUp
                if(acListCurrent == 0 || acListCurrent == -1){
                    acListCurrent = acListTotal-1;
                }else{
                    acListCurrent--;
                }
            } else { // keyDown
                if(acListCurrent == acListTotal-1){
                    acListCurrent = 0;
                }else {
                    acListCurrent++;
                }
            }

            // loop through each result div applying the correct style
            acResultsDiv.children().each(function(i){
                if(i == acListCurrent){
                    acSearchField.val(this.childNodes[0].nodeValue);
                    this.className = "selected";
                } else {
                    this.className = "unselected";
                }
            });

            return true;
        } else {
            // reset
               minLength: 1;
            acListCurrent = -1;
            return false;
        }
    }

1 个答案:

答案 0 :(得分:0)

我怀疑当你拥有经过测试并且应该使用的jQuery插件时,有人会查看这段代码。 像this这样的东西可能会有很大的帮助,here你可以找到文档。 jQuery是免费使用的,你可以在商业目的中使用它。