上來先展示效果：
默認展示效果：

輸入內容:

?

上代碼：

css部分：

<style type="text/css">* {padding: 0;margin: 0;}h2 {margin-bottom: 20px;}#container {width: 500px;text-align: center;margin: 0 auto;font-family: "微軟雅黑";margin-top: 50px;}.selectContainer {position: relative;}.selectInput {width: 200px;height: 25px;border-style: none;border: 1px solid #999;border-radius: 3px;padding: 0 3px;}.picture_click {background: url(img/select-default.png) no-repeat; opacity: 1; width: 15px; height: 8px;position: absolute;top: 10px;right: 125px;}.picture_click:hover {background-image: url(img/select-hover.png);}.selectList {width: 206px;height: 212px;overflow-y: scroll;text-align: left;margin: 0 172px;border: 1px solid #999;display: none;position: relative;}.selectList div {cursor: pointer;}.nullcon{display: none;text-align: center;padding: 10px;word-break: break-all;} </style>

html部分：

<div id="container"><h2>模糊搜索</h2><div id="cityContainer" class="selectContainer"><label>公司：</label><input type="text" placeholder="請輸入公司名稱" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this, 'cityList')" /><div class="picture_click dropDowns" style=""></div><div id="cityList" class="selectList"></div></div> </div>

js部分：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript">function fuzzySearch(listId) {var that = this;//初始化下拉框 initSearchInput(that, listId);var listArr = [{'eleId':'01',eleName:'測試公司'},{'eleId':'02',eleName:'出納測試公司1'},{'eleId':'03',eleName:'期間設置公司'},{'eleId':'04',eleName:'演示公式'},{'eleId':'05',eleName:'公司11'},{'eleId':'06',eleName:'HFY測試公司'},{'eleId':'07',eleName:'測試公司2'},{'eleId':'08',eleName:'中餐飲有限公司'},{'eleId':'09',eleName:'烤匠烤魚餐廳'},{'eleId':'10',eleName:'呷哺呷哺北京1'},{'eleId':'11',eleName:'呷哺呷哺北京2店'},{'eleId':'12',eleName:'呷哺呷哺北京3店'},{'eleId':'13',eleName:'肯德基'},{'eleId':'14',eleName:'麥當勞'},{'eleId':'15',eleName:'必勝客'},{'eleId':'16',eleName:'麥當勞222'}]var aa=$('#' + listId);//遍歷數組，創建元素默認顯示$('#' + listId).html('');$.each(listArr, function(index, item){var divStr = '<div id='+item.eleId+'>'+item.eleName+'</div>';$('#' + listId).append(divStr);})$('#' + listId).append('<div id="nullcon" class="nullcon">沒有找到內容</div>');//current用來記錄當前元素的索引值var current = 0;//匹配文本框中輸入的字符串var showList = searchText(that, listArr, listId);bindFun();//為文本框綁定鍵盤引起事件$(this).keyup(function(e){//如果輸入空格自動刪除this.value=this.value.replace(' ','');//列表框顯示$('#' + listId).show();if(e.keyCode == 38) {//upconsole.log('up');current --;if(current <= 0) {current = 0;}console.log(current);}else if(e.keyCode == 40) {//downconsole.log('down');current ++;if(current >= showList.length) {current = showList.length -1;}console.log(current);}else if(e.keyCode == 13) {//enterconsole.log('enter');//如果按下回車，將此列表項的內容填充到文本框中 $(that).val(showList[current].eleName);//下拉框隱藏$('#' + listId).hide();}else {//otherconsole.log('other');showList = searchText(that, listArr, listId);current = 0;}//設置當前項的背景色及位置if(showList && showList.length!=0){$.each(showList, function(index, item){if(index == current) {$('#' + item.eleId).css('background', '#eee');$('#' + listId).scrollTop($('#' + item.eleId).get(0).offsetTop);}else {$('#' + item.eleId).css('background', '');}})}//設置下拉框的高度//212為列表框的最大高度if(showList && showList.length!=0){if(212 > $('#' + listId).find('div').eq(0).height() * showList.length) {$('#' + listId).height($('#' + listId).find('div').eq(0).height() * showList.length);}else {$('#' + listId).height(212);}}})}//綁定事件function bindFun(){//給下拉箭頭綁定點擊事件 點擊下拉箭頭顯示/隱藏對應的列表//輸入框的類名為selectInput//下拉箭頭的類名為picture_click、dropDowns//下拉列表的類名為selectListfor(var i = 0; i < $('.picture_click').length; i++) {$('.picture_click').eq(i).click(function(){$(this).parent().find('.selectList').toggle();})}//為列表中的每一項綁定鼠標經過事件$('.selectList div').mouseenter(function(){$(this).css("background", "#eee").siblings().css("background", "");});//為列表中的每一項綁定單擊事件$('.selectList div').bind('click', function(){//文本框為選中項的值$(this).parent().parent().find('.selectInput').val($(this).html());//下拉框隱藏$(this).parent().hide();}); }function initSearchInput(that, listId) {//點擊下拉框外部的時候使下拉框隱藏var dropDowns = document.getElementsByClassName('dropDowns');var selectList = document.getElementsByClassName('selectList');document.body.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;console.info('target', target);console.info('that', that);console.info('===', target == that)if(target == that){$('#' + listId).show();}else{for(var i = 0; i < dropDowns.length; i++) {if(target != dropDowns[i] && target != selectList[i]){selectList[i].style.display = 'none';}}}}}function searchText(that, listArr, listId){//文本框中輸入的字符串var searchVal = $(that).val();var showList = [];if(showList.length== 0 && !$(that).val()){//showList為列表中和所輸入的字符串匹配的項showList = listArr;}if(searchVal){//將和所輸入的字符串匹配的項存入showList//將匹配項顯示，不匹配項隱藏$.each(listArr, function(index, item){if(item.eleName.indexOf(searchVal) != -1) {$('#' + item.eleId).css('display', 'block');showList.push(item);}else {$('#' + item.eleId).css('display', 'none');}})}else{showList = listArr;$.each(listArr, function(index, item){$('#' + item.eleId).css('display', 'block');})$(that).siblings('.selectList').find('#nullcon').hide();}if(showList.length== 0 && $(that).val()){$('#' + listId).height(50);$(that).siblings('.selectList').find('#nullcon').html('沒有找到"'+$(that).val()+'"的內容').show();}console.log('showList', showList);return showList;} </script>

?

轉載于:https://www.cnblogs.com/janice-jia/p/9708815.html

總結

以上是生活随笔為你收集整理的超好用的input模糊搜索 jq模糊搜索，的全部內容，希望文章能夠幫你解決所遇到的問題。

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