How to use jQuery to realize the fuzzy matching query function of HTML page text box

This article mainly introduces how to use jQuery to achieve HTML page text box fuzzy matching query function related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use jQuery to achieve HTML page text box fuzzy matching query function article will have a harvest, let's take a look at it.

You can see the following effect illustration:

Next up is the code, pure html+css+jquery:

Www.jb51.net jQuery Fuzzy matching query # div_main {margin: 0 auto; width: 300px; height: 400px; border: 1px solid black; margin-top: 50px;} # div_txt {position: relative; width: 200px; margin: 0 auto; margin-top: 40px;} # txt1 {width: 99% } # div_items {position: relative; width: 100%; height: 200px; border: 1px solid # 66afe9; border-top: 0px; overflow: auto; display: none;} .div _ item {width: 100%; height: 20px; margin-top: 1px; font-size: 13px; line-height: 20px Jay Chou, Jay Chou, Lin Junjie, Lin Yoga, Lin Miaoke, Tang Yan, Tang Jiasan, Tang Dynasty, Audi A4L, Audi A6L, Audi A8L Audi R8 BMW GT / / pop-up list box $("# txt1") .click (function () {$("# div_items") .css ('display' 'block') Return false;}); / / hide list box $("body") .click (function () {$("# div_items"). Css ('display',' none');}); / / move in and out effect $(".div _ item") .hover (function () {$(this) .css ('background-color',' # 1C86EE'). Css ('color',' white') }, function () {$(this) .css ('background-color',' white'). Css ('color',' black'); / / enter $("# txt1") .keyup (function () {$("# div_items"). Css ('display',' block') in the text box; / / display the list box if ($("# txt1"). Val (). Length as soon as you enter