js code that imitates Baidu input box smart prompt_javascript skills-JS Tutorial-php.cn

js code that imitates Baidu input box smart prompt_javascript skills

WBOY

Release： 2016-05-16 17:24:44

Original

1586 people have browsed it

Customer demands have been changing recently, but some of them were due to urgent requests from customers, so I couldn’t finish it quickly, so I made a prototype for them first, and then slowly modified it later. For example, I made a drop-down list for them in the prototype. In fact, they have more than 200 pieces of data. It is unrealistic to use a drop-down list. How can you find so much? And how long should that drop-down list be? So naturally, I thought of Baidu’s smart prompt function.

I referred to what I forgot to write before. He used Baidu API. For the sake of simplicity, I put all the data in js, so that it would be easier for readers to understand.

Let’s pass the entire code, it’s not long. Before I took the test, I forgot which hero wrote it. He used Baidu API. For the sake of simplicity, I set all the data in js, so that it would be easier for the readers to understand.

Copy code The code is as follows:

>

When you copy the code, remember to bring jquery with you, otherwise you will have to scold your mother again if you make a mistake...

Let’s talk about the main ideas.

First, make the data into a js array, then traverse the array, generate a div for each piece of data, and then add it to the auto_div div. Also set the mouse to move over the highlight, move it away to return to normal, and click The text box will be automatically filled in when the mouse is clicked on the web page, and the list box will disappear when the mouse is clicked on the web page - of course there are more details to pay attention to, here is just an example. How to trigger the AutoComplete event when the text in the text box changes? Use onchange? Wrong, onchange is triggered when the text box loses the cursor, so it is better to use the keyup event.

Not much else to say, the code is not difficult to understand and the principle is also very simple. One thing I want to emphasize is that with this kind of smart prompt function, some novices may think of using fuzzy search. When the text in the text box changes, they check the database and list the returned data - this is not good. I won't say that he is wrong because this is indeed feasible, but it will cause too much burden on the server. Every time the text is changed, the database is checked, as if I have to ask you every time I want something. It is better for you Give them all to me at once and I can choose what I want. Of course, everything has two sides. Checking out all the data at once will consume memory. This is not recommended for big data. This approach is suitable for most situations, because most situations are not big data - big data. Think of it.

Finally, let me talk about my feelings: I interviewed as a front-end engineer before. At that time, people thought I was still young. Indeed, I was very young at that time. Now, I am starting to become stronger in the front-end field. Although the company does not have front-end engineers, I still think the front-end is very important. I need to use the front-end reasonably to solve some problems that can be easily solved with the front-end instead of leaving it to the outside world. Processed in the background. While working in the company, I didn’t learn much from others, but when the demand came, I figured out my own solutions and found some solutions online, and I also learned a lot. Keep doing it, come on!