css部分：

<style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}.nice-select input{outline: none;cursor: pointer;width: 14em;height: 1.8em;font-size: 1em;border: 1px solid #000;background: url(image/icon.png) no-repeat scroll right center transparent;background-position: 96% 50%;padding: 0 10px;-webkit-border-radius: .3em;-moz-border-radius: .3em;border-radius: .3em;position: absolute;line-height: 1.8em;}ul{list-style: none;}.nice-select{position: relative;width: 14em;margin: 20px;box-shadow: 0 3px 5px #999;-webkit-border-radius: .3em;-moz-border-radius: .3em;border-radius: .3em;}.nice-select ul{display: none;border: 1px solid #d5d5d5;width: 13.9em;position: absolute;top: 1.8em;overflow: hidden;background-color: #fff;max-height: 150px;overflow-y: auto;border-top: 0;z-index: 10001;}.nice-select ul li{height: 30px;line-height: 2em;overflow: hidden;padding: 0 10px;cursor: pointer;border-top: 1px solid #d5d5d5;}.nice-select ul li.on{background-color: #e0e0e0;}</style>

html部分：

<div class="nice-select"><input id="customerId" type="text" oninput="searchList(this.value)"><ul><li>Java--我的最愛</li><li>PHP--很棒的wo</li><li>HTML--簡單</li><li>jQuery--有點難</li><li>Android--安卓</li><li>C--不會</li><li>C++--更不會</li><li>Struts--懂哦</li><li>hibernate--已經不怎么懂</li><li>spring--懂哦</li><li>0123456789--10</li></ul> </div>

js部分：（此處需要引入jquery.js）

<script type="text/javascript">$(function(){$(".nice-select").click(function(e){$(this).find("ul").show();e.stopPropagation();});$(".nice-select ul li").hover(function(e){$(this).toggleClass("on");e.stopPropagation();});$(".nice-select ul li").click(function(e){var val = $(this).text();val = val.substring(0, val.indexOf('--'));$(".nice-select").find("input").val(val);$(".nice-select").find("ul").hide();e.stopPropagation();});$(document).click(function(){$(".nice-select").find("ul").hide();});});function searchList(strValue) {var count = 0;if (strValue != "") {$(".nice-select ul li").each(function(i) {var contentValue = $(this).text();if ((contentValue.indexOf(strValue.toLowerCase()) < 0)&& (contentValue.indexOf(strValue.toUpperCase()) < 0)) {$(this).css("display", "none");count++;} else {$(this).css("display", "block");}if (count == (i + 1)) {$(".nice-select").find("ul").hide();} else {$(".nice-select").find("ul").show();}});} else {$(".nice-select ul li").each(function(i) {$(this).css("display", "block");});}}</script>

?

轉載于:https://www.cnblogs.com/shanhaihong/p/5691240.html

總結

以上是生活随笔為你收集整理的模糊查询输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。