Home >Web Front-end >JS Tutorial >JS control autocomplete 0.11 demo and download updated on January 5_javascript skills

JS control autocomplete 0.11 demo and download updated on January 5_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:21:471192browse

Updated on January 5th

Fixed the bug that the focus of the auto-complete text box was lost and the auto-complete container could not disappear
Added the expandAllItem method, all items can appear when double-clicked, please see the example for details
Added customStyle example, which demonstrates how to beautify the autocomplete control with CSS. See the autocomplete_custom css file

for demonstration and download:
http://www.never-online.net/code /neverModules/autocomplete/

Feature improvements and features compared to the previous version:
1. Improved matching speed.
2. Add the ignoreCase attribute (when it is false, it will be case-sensitive, the default is true)
3. Add the ignoreWhere attribute (when it is true, the matching result will use greedy matching, that is, as long as there are input characters in the entire string, the dataSource content will be sent to the matching result)
4. Press esc to return.
5. Compatible with IE6.0, Opera9.0, Mozilla Firefox1.5
6. DataSource data can be cleared manually or dynamically assigned to dataSource. Conveniently perform AJAX, please see the example for details.
7. highlighted attribute (default is true, when the amount of data is large, it is recommended to set it to false).
8. In IE, make up for the div to be obscured by the select control. See the first example for details.
9. Arrow keys support.

Ideas and references:

During initialization, I use join("") to generate dataSource strings for all the data at once (the html I use for string words is as short as possible. Enable it to generate data with the smallest string), and then use regular expressions to match. It feels like this is already very fast in terms of speed.

Although the range function has not been added yet, the basic one is enough. The speed is pretty good. Now I have found a speed problem. If you want to make full use of the efficiency of the kernel in Opera, Mozilla, and IE, the result will be that the code may be greatly lengthened. After all, the efficiency between different cores is very different.

Compatibility and efficiency are also contradictory issues. Using the insertAdjanceHTML method is one of the simplest and compatible ways to insert a string in most cases.

Another problem is adding highlight. After using join, to highlight, you must backtrack again, which is equivalent to matching twice. This is also one of the issues of efficiency. Therefore, it is recommended to set the highlighted attribute to false when the amount of data is large. In theory, this efficiency should increase the speed by about 40%.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn