Q:

How to define first and last object and stop the loop

I am sharing a fiddle with you guys and on there, if you focus on the input field and move the keyboard arrow down key, it will start selecting the items.
Once you reach the last it takes you to up again.
I want to restrict it is such a way that: if you are on the last item it wont start again from top and gives alert('no more!'), and remains on the last; and when arrow up to the first, it won't start from the last again and remains on the first.

A:

The followings are the neccessary changes in the body of the Navigate function. Instead of this:
if (displayBoxIndex >= oBoxCollection.length)
    displayBoxIndex = 0;
if (displayBoxIndex < 0)
    displayBoxIndex = oBoxCollection.length - 1;

You need to have this block of code:
if (displayBoxIndex >= oBoxCollection.length)
    displayBoxIndex = oBoxCollection.length - 1;
if (displayBoxIndex < 0)
    displayBoxIndex = 0;

The alert would look like this:
if (displayBoxIndex >= oBoxCollection.length) {
    alert('no more!');
    displayBoxIndex = oBoxCollection.length - 1;
}

