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 />

有什么想法吗？ THX

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/

Answer 2

在runSearch函数中，在语句

之后

this.Term = document.getElementById('searchbox').value.toUpperCase();

检查搜索词的长度

if (this.Term.length() < 3){
    alert('You must enter at least 3 characters when searching...');
    return;
}

多数人。

最小输入长度（搜索框）

2 个答案: