Automatic matching of input input box (native code)_javascript skills

Today, someone in the group posted some interview questions from Renren.com. I have reposted some of them before. I happened to be free, so I picked a question to do and practice my skills.

This question has the following requirements:
1. Use native code to implement, no framework can be used;
2. Match the characters entered in the input box, and it will match The content is displayed below the input box in the form of a menu;
3. Only English characters are matched, and the matched content is bolded in the menu;
4. The menu can be navigated through the up and down arrows on the keyboard Make a selection, press Enter and write the selected content into the input box;
Idea
Capture the input changes and use the value entered by the user (hereinafter referred to as the input value) to match the list Item, here it is assumed that the list item is an array (hereinafter referred to as the list) returned by the query. The matching method is to use the input value as the starting value to match each list value, and output the items that meet the filtering conditions to the page.
Analysis
The keywords in the third requirement are bold, just replace them with regular expressions here.
The fourth point requires more keywords. One sentence hides many murderous intentions. This part is mainly for the keyboard. First, press the up and down keys, then press Enter, and write to the input box.

At this point, if you think it’s over, it’s too hasty. There are at least 4 hidden needs.
•The first item is highlighted by default, and the current item is highlighted while pressing the up and down keys.
•Press Enter and the first item will be selected by default.
•The current item is highlighted when the mouse passes over it.
•Supports clicking on selected items.
Maybe there is something missing, so I won’t worry about it here.
Practice
Although this is a JS question, the page structure must be written first.

Copy code The code is as follows:

Occupying place

Occupying pit

div>

Since frames are not allowed, here is a simple encapsulation of some possible methods.
First create an encapsulation object, let’s name it dom, and then put all the native methods into this object for reuse.

Copy code The code is as follows:

var dom = {
$ : function( id ){
return document.getElementById(id);
},
tag : function( tagName,root ){
root = root ? root : document;
return this.makeArray( root .getElementsByTagName(tagName) );
},
bind : function( element,type,handler ){
if( document.addEventListener ){
element.addEventListener( type,handler,false );
}else if( document.attachEvent ){
element.attachEvent( 'on' type,handler );
};
},
removeClass : function( list,name ){
var el = list[i],
r = new RegExp('\s*\b' name '\b\s*','g');
for( var i = 0 , len = list.length ; i var cur = list[i];
if( r.test( cur.className ) ){
cur.className = cur.className. replace(r,'');
};
};
},
height : function( element ){
return element.offsetHeight;
},
getBound : function( element ){
return element.getBoundingClientRect();
},
getText : function( element ){
return element.textContent ? element.textContent : element.innerText;
},
trim : function( string ){
return string.replace( /^s*(.*)s*$/,'$1' );
},
makeArray : function( tagList ){
for( var i = 0 , arr = [] , len = tagList.length ; i arr.push( tagList[i] );
};
return arr;
},
isVisible : function( element ){
return element.style.display == 'block';
}
};

Then create an object to store the specific processing logic. The author’s English is pretty bad, so let’s call it autoMatch.
This object has a lot to do:
•Determine the location of the menu;
•Process user input in real time;
•Process mouse and keyboard keystrokes;
Determine the location of the menu Use the getBound method of the encapsulated object dom to return a boundary object. This object has two attributes left and top. It may look familiar, it is similar to the offset() method in jQuery.
Handling user input is worth mentioning here. Since it is real-time processing, I started to consider using the onchange event, but it will only be triggered when the focus is lost, so it is unreasonable.
At this time, my eyes turned to oninput, which is fully capable of doing the job.

Copy code The code is as follows:

dom.bind( obj.input,'input' , this.inputProcess );

However, IE did something unconventional again. It does not support oninput.
The joy is all in vain!
There is always a turning point in everything. The onpropertychange in the corner is slowly coming towards us... It is very similar to oninput and has the same characteristics. At least in terms of capturing input input, it is exactly what I want. We all use it to deal with IE, and we all agree to use it. .
Bind again:

Copy code The code is as follows:

dom.bind( obj.input,'propertychange' , this.inputProcess );

The next step is the keys, up, down, and enter. The corresponding key codes are 38, 40, and 13 respectively. The only thing to note is that the attribute names of FF and IE are different.
See the Demo for detailed implementation details:
Click me to view the Demo
In a real business scenario, real-time Ajax query may be performed on the user's input, which means that every time a letter is typed There will be a query.
However, it is not cost-effective to send Ajax requests so frequently, and the response speed does not allow for such an implementation.
My idea is to send a request when the user types the first letter (the number of request data is generally limited, usually 10), and store the return value (hereinafter referred to as cache).
User input after the first letter is filtered in the cache. It is like a local query. Every time a letter is entered, the accuracy becomes higher and higher, and the cache becomes smaller and smaller.
Repeat the above steps when the user clears and re-enters.
Of course, it is not ruled out that there will be some more complex business scenarios. For example, when there is sufficient matching, it is necessary to ensure that the user has 10 data options for each input, which requires more judgments and requests.
So, the specific implementation depends on the real business scenario.
This is the end of this article. Thanks for reading, and any flesh-and-blood comments are welcome.