Min length of input (searchbox)

Question

I need to add a popup window event to my search system - when a customer hit only 2 characters it should popup a small table with alert eg "You must enter at least 3 characters when searching..." and the background should be greyed out.

Is this possible for me? Here is my javascript code for searching (in table):

/*** 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; }
}

And here is my html code (search box):

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

Any ideas? Thx

Answer 1

This is a little example using part of your code, and a simple div as a popup:

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:

<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

In your runSearch function, after the statement

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

check the length of the search term

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

Thats all.