Javascript自动完成最小长度2

javascript autocomplete with min length 2

本文关键字:Javascript      更新时间:2023-09-26

我想添加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;
        }
    }

我怀疑有人会看这段代码,当你有jQuery插件测试良好,应该使用。像这样的东西可能会有很大的帮助,您可以在这里找到文档。jQuery是免费的,您可以将其用于商业用途。