Filtering a long list of select

27.10.2011 16:31:00 Often there is a need to make a big list of categories on the site or in the administrative part, but this list is not easy to find in him the right columns, it just turns kilometer. Today I will show you how to make a list with a filter for the administration of the site, unfortunately my wrapper <select> list is not very cross-browser, and not understandable for the user is not prepared, so wrappers can be used effectively only in the administrative part of the site, by the way in my Dashed CMS used this wrapper for lists.

Now I will describe how my filter list.

Standard <select> is not replaced by other elements, so it is easily integrated for any needs, and in case of error in the javascript itself does not control stops working

When the mouse <select> grabs focus

Once captured by the focus you can press any key and the box appears and the filter intercepts the focus on yourself, you can now enter the text interesting, and it will be filtered <select>

Filtering is the ignoring of the full register and the occurrence of words in a line rather than on the first character, if you want the first character you can replace a string var reg = new RegExp (str, "gim"); on var reg = new RegExp ('^ '+ str, "gim");

When you activate the filter list reveals the close and not until you click on it the desired item with the mouse or not to cancel the filtering

To wrap this characteristic is not very cross-browser behavior, such as Fire Fox managed to hide under the filter is not podpodayuschih <options>, and other browsers could only do they not active, as in all browsers, filtering can cancel key Esc, while Opera's kakoyto resisted because it

Used to expand the list of his property size, that is not right, but unfortunately due to security in all browsers do not emulate the disclosure of the list, this feature puts a lot of problems with the style settings for the block and the container itself <select>, in general you have to adjust styles so that the list is not moved the page

In general, my wrapper is not a complete solution to a long list, but to install the admin area requires a functional can be used, because the administrator is likely to use the browser, which will advise him to work with this admin.

View a sample list and its source code can be here

Рейтинг $r-- [1] $r++

Показать коментарии (vkontakte.ru)

}