Javascript implementation text box drop-down prompt (smart prompt) effect

When you often search for something in a browser, you will surely find that Baidu will have a smart drop-down prompt as long as you enter a word at will, and feel that the experience is quite good!
However, I don't know how to implement it, so I don't have to worry about it. The following describes a simple and lightweight method, which can be directly downloaded and used after files have been sorted out:

The implementation result is as follows: Reference File: jquery. js autoComplete. js

Css

<Style type = "text/css">
Ul, li {margin: 0; padding: 0; list-style-type: none ;}
A: hover {text-decoration: underline ;}
. Txt {width: 210px; height: 25px; border: 1px solid # ccc; line-height: 25px; padding: 0 5px ;}
. AutoDis {border: 1px solid #999; position: absolute; overflow: hidden; display: none ;}
. AutoDis p {line-height: 25px; cursor: default; padding: 0 5px ;}
. AutoDis li {line-height: 25px; cursor: default; padding: 0 5px; background-color: # fff ;}
. AutoDis. cur {background: # ccc ;}
</Style>

Html

<Div id = "wrap">
<Input id = "autoCom" type = "text" class = "txt">
</Div>

Javascript

<Script type = "text/javascript">
Var cnames ('.txt ');
Var data = ['20160301', '20160301', '20160301', '20160301', '20160301', 'www .ljiong.com '];
Var aaa = new autocom (data );
Aaa. autoComplete. init (). bind (c );
</Script>

The effect is as follows: