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

This article mainly introduces "jQuery how to achieve HTML page text box fuzzy matching query function", in the daily operation, I believe that many people in jQuery how to achieve HTML page text box fuzzy matching query function has doubts, editor consulted all kinds of data, sorted out a simple and easy to use method of operation, hope to answer the "jQuery how to achieve HTML page text box fuzzy matching query function" of doubt to help! Next, please follow the editor to study!

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