javascript - 输入的最小长度(搜索框)

Question

我需要向我的搜索系统添加一个弹出窗口事件 - 当客户仅输入 2 个字符时，它应该弹出一个带有警报 e 的小表格。 G。 “搜索时必须输入至少 3 个字符...”并且背景应变灰。

这对我来说可能吗？这是我用于搜索的 javascript 代码(在表中):

/*** SEARCHBOX ***/

//define the table search object, which can implement both functions and properties
    window.tableSearch = {};
//initialize the search, setup the current object
tableSearch.init = function() {
    //define the properties I want on the tableSearch object
    this.Rows = document.getElementById('data').getElementsByTagName('TR');
    this.RowsLength = tableSearch.Rows.length;
    this.RowsText = [];

    //loop through the table and add the data to the table search object
    for (var i = 0; i < tableSearch.RowsLength; i++) {
        this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
    }
}

    //onlys shows the relevant rows as determined by the search string
tableSearch.runSearch = function() {
    //get the search term
    this.Term = document.getElementById('searchbox').value.toUpperCase();

    //loop through the rows and hide rows that do not match the search query
    for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
        row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
    }
}

//handles the enter key being pressed
tableSearch.search = function(e) {
    //checks if the user pressed the enter key, and if they did then run the search
    var keycode;
    if (window.event) { keycode = window.event.keyCode; }
    else if (e) { keycode = e.which; }
    else { return false; }
    if (keycode == 13) {
        tableSearch.runSearch();
    }
    else { return false; }
}

这是我的 html 代码(搜索框):

<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td>
<input id="searchbox" size="25" maxlength="100" value="search..." style="color: gray;" name="Search" onkeyup="tableSearch.search(event)" onfocus="if(this.value == 'search...') {this.value=''}" onblur="if(this.value == ''){this.value ='search...'}" type="text" />&nbsp;
<input class="button_searchbox" value="Search" onclick="tableSearch.runSearch();" type="button" />
</td></tr></tbody>
</table><br />

有什么想法吗？谢谢

Answer 1

这是一个使用部分代码和一个简单的 div 作为弹出窗口的小示例:

function doSearch(event)
{
    var keycode;
    if (window.event) { keycode = window.event.keyCode; }
    else if (e) { keycode = e.which; }
    else { return false; }

    if (keycode == 13) 
    {
        if (this.searchbox.value.length > 2)
        {
            console.log("Searching...");
        }
        else
        {
            document.getElementById("divPopup").style.display = "block";
        }
    }
    else 
    {
        document.getElementById("divPopup").style.display = "none";
        return false; 
    }
}

分区:

<div id="divPopup">You must enter at least 3 characters when searching...</div>

CSS:

#divPopup
{
    color: grey;
    font-family: Verdana;
    font-size: 10px;
    border: 1px solid black;
    width: 200px;
    display: none;
}

JSFiddle:http://jsfiddle.net/hescano/9NFqL/