jquery 實現輸入框聯想搜索

實際功能中有很多聯想搜索 在這里封裝成方法，變成可復用的

<div class="autoSupRelative"><input type="text" class="input" name="CompanyName" id="CompanyName" autocomplete="off"><ul class="autoSupAbsolute"></ul></div> .autoSupRelative{position: relative;padding: 0;float:left;z-index:99;} .autoSupAbsolute{position: absolute;left: 0;top:30px;background: #ffffff;border:1px solid #ccc;width:100%;max-height:240px;overflow-y: auto;margin: 0;padding: 0;box-shadow: 0px 2px 2px #ccc;display: none} .autoSupAbsolute li{ list-style: none;cursor: pointer;padding: 5px;line-height: 22px;font-size: 12px;} .autoSupAbsolute li:hover{background: #2dc3e8;color: #ffffff;} /模糊查詢 function SearchLike(jsons) {//var timerSerch = null;$(document).on('keyup', '[name=' + jsons.name + ']', function () {var This = this;this.timerSerch = setTimeout(function () {//如果一直輸入，就先不查詢，等鍵抬起500毫秒之后再進行查詢。getSearchValue({This: This,Event: "keyup",url: jsons.url,fun: jsons.fun});}, 500);$(this).parents('.autoSupRelative').css({ 'zIndex': '100' });$(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();}).on("blur", function () {$('.autoSupRelative').css({ 'zIndex': '' });});$(document).on('keydown', '[name=' + jsons.name + ']', function () {var _this = this;clearTimeout(_this.timerSerch);});$(document).on('click', '.autoSupAbsolute li', function (e) {var name = $(this).parents('.autoSupRelative').find('input[type=text]').attr('name');if (name == jsons.name) {var thisHtml = $(this).attr('companyName');//.replace('<span style="display: none; width: 0px; height: 0px;" id="transmark"></span>', '');//.split('<span')[0];// thisHtml = thisHtml.split(',')[0];if (jsons.HideName) {$(this).parents('.autoSupRelative').find('[name=' + jsons.HideName + ']').val($(this).attr("PK_Guid"));}if (thisHtml) {$(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').val(thisHtml);}if (jsons.fun1) {jsons.fun1(this);}$(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').siblings('ul').html('');$(this).parents('.autoSupAbsolute').hide();}});// $('[name=' + jsons.name + ']').on('click', function (e) {$(document).on('click', '[name=' + jsons.name + ']', function (e) {e.stopPropagation();var This = this;$('.autoSupRelative').css({ 'zIndex': '99' });$(this).parents('.autoSupRelative').css({ 'zIndex': '100' });$(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();// if ($(this).parents('.autoSupRelative').find('ul li').length ==0) {//如果沒有輸入字段，就不重新檢索$(this).parents('.autoSupRelative').find('ul').html('<div style="padding:0 10px;">數據加載,請稍后....</div>');getSearchValue({This: This,Event: "click",url: jsons.url,fun: jsons.fun});// }}).on("blur", function () {$('.autoSupRelative').css({ 'zIndex': '' });});$(document).on('click', function (e) {$('.autoSupAbsolute').hide();});function getSearchValue(json) {$.ajax({type: "GET",//POSTurl: json.url + encodeURIComponent($(json.This).val()),success: function (msg) {var htmlInit = '';//if (msg != "") {msg = JSON.stringify(msg)msg = msg.replace(/'/g, '"');//把單引號替換成雙引號//var datas = jQuery.parseJSON(msg);var datas = []datas = jQuery.parseJSON(msg).result;var html = '';if (json.Event == 'click') {if (datas.length == 0) {$(json.This).next().val('');//清除隱藏域的賦值htmlInit = '<div style="text-align:center">未找到此項....</div>';} else {for (var i = 0; i < datas.length; i++) {if (json.fun) {htmlInit += json.fun(datas[i]);} else {htmlInit += '<li PK_Guid="' + datas[i].companyGuid + '"companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';}}}$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(htmlInit);$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').show();}if (json.Event == 'keyup') {if ($(json.This).val() == '') {$(json.This).parents('.autoSupRelative').find('ul').html('');$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').hide();} else {if (datas.length == 0) {$(json.This).next().val('');//清除隱藏域的賦值html = '<div style="text-align:center">未找到此項....</div>';} else {for (var i = 0; i < datas.length; i++) {if (json.fun) {html += json.fun(datas[i]);} else {html += '<li PK_Guid="' + datas[i].companyGuid + '" companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';}}}$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(html);}}// }},error: function () {$(json.This).parents('.autoSupRelative').find('ul').html('<div style="padding:10px;">數據加載失敗....</div>');}});} }// 使用--點擊輸入框，請求接口--url是聯想搜索接口，companyName沒有值的時候顯示所有的列表--下拉列表選擇把姓名和id復制給input SearchLike({name: 'CompanyName', url: '/CompanyCustomBill/CompanySimpInfo?companyName=', fun1: function (_this) {$("#CompanyName").val($(_this).attr('companyName'));$("[name=CompanyGuid]").val($(_this).attr('PK_Guid'));} });

總結

以上是生活随笔為你收集整理的jquery 实现输入框联想搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

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