2. 程式人生 > >使用jQuery實現實時模糊查詢功能

使用jQuery實現實時模糊查詢功能

阿新 • • 發佈：2018-12-31
//搜尋 $('#search').bind('input propertychange',function(){ $('#_list').empty().hide(); $('#top_list').empty().hide(); $('#gengduo').hide(); var input=""; $('#result').empty().show(); input =$('#search').val(); if(input.length<0||input==null||input==""){ $('#result'
).empty(); } $.ajax({ method:'post', url:'${ctx}/getPostsByTitle?title='+input, dataType:'json', success:function(data){ if(data.length>0){ var nums = 10; //每頁出現的數量 var pages = Math.ceil((data.length)/nums); //得到總頁數 var thisDate = function
(curr){ //此處只是演示，實際場景通常是返回已經當前頁已經分組好的資料 last = curr*nums - 1; var str=""; var str1="";var str2="";var str3=""; last = last >= data.length ? (data.length-1) : last; for(var i = (curr*nums - nums); i <= last; i++){ /* for(var i=0;i<data.length;i++){ */
if(data[i].top==1&&data[i].nice==1){ str+='<li class="fly-list-li">' +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">' +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>' +'</a>' +'<h2 class="fly-tip">' +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>' +'<span class="fly-tip-stick">置頂</span>' +'<span class="fly-tip-jing">精帖</span>' +'</h2>' +'<p>' +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>' +'<span>'+data[i].starttime+'</span>' +'<span>layui框架綜合</span>' +'<span class="fly-list-hint">' +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+'' +'<i class="iconfont" title="人氣">&#xe60b;</i> '+data[i].view+'' +'</span>' +'</p>' +'</li>'; //$('#result').append(html); } if(data[i].top==1&&data[i].nice==0){ /* 置頂帖 */ str1+='<li class="fly-list-li">' +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">' +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>' +'</a>' +'<h2 class="fly-tip">' +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>' +'<span class="fly-tip-stick">置頂</span>' +'</h2>' +'<p>' +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>' +'<span>'+data[i].starttime+'</span>' +'<span>layui框架綜合</span>' +'<span class="fly-list-hint">' +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+'' +'<i class="iconfont" title="人氣">&#xe60b;</i> '+data[i].view+'' +'</span>' +'</p>' +'</li>'; } if(data[i].top==0&&data[i].nice==1){ /* 加精帖 */ str2+='<li class="fly-list-li">' +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">' +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">' +'</a>' +'<h2 class="fly-tip">' +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>' +'<span class="fly-tip-jing">精帖</span>' +'</h2>' +'<p>' +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>' +'<span>'+data[i].starttime+'</span>' +'<span>layui框架綜合</span>' +'<span class="fly-list-hint">' +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+'' +'<i class="iconfont" title="人氣">&#xe60b;</i>'+data[i].view+'' +'</span>' +'</p>' +'</li>'; } if(data[i].top==0&&data[i].nice==0){ /* 普通帖 */ str3+='<li class="fly-list-li">' +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">' +' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">' +'</a>' +'<h2 class="fly-tip">' +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>' +'</h2>' +'<p>' +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>' +'<span>'+data[i].starttime+'</span>' +'<span>layui框架綜合</span>' +'<span class="fly-list-hint"> ' +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+'' +'<i class="iconfont" title="人氣">&#xe60b;</i>'+data[i].view+'' +'</span>' +'</p>' +'</li>'; } } return str+str1+str2+str3; }; //呼叫分頁 laypage({ cont: $('.page_list'), pages: pages, //總頁數 groups:3, //連續顯示的分頁數 // skip:true,//是否顯示跳轉功能 skin:'#009688', //載入內建面板，也可以直接賦值16進位制顏色值，如:#c00 jump: function(obj,first){ document.getElementById('result').innerHTML = thisDate(obj.curr); } }) }else{ var html='<div class="fly-none">並無相關資料</div>'; $('#top_list').empty().hide(); $('#_list').empty().hide(); $('#result').append(html); } }, error:function(data){ layer.msg('請求異常，請重試'+JSON.stringify(data), {shift: 6,time:3000}); } }) });

相關推薦

使用jQuery實現實時模糊查詢功能

//搜尋 $('#search').bind('input propertychange',function(){ $('#_list').empty().hide(); $('#top_list').empty().hide(); $('#gengduo').hide();

基於bootstrap selectpicker ，實現select下拉框模糊查詢功能

sele TP 選擇器 art 基於 i++ 同時 html .html 1、html代碼塊 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-

jQuery根據文字框輸入實時模糊查詢全詞匹配 ，ajax非同步查詢

/* ***人員檢索start (ajax實時後臺獲取最新資料) */     //按姓名檢索 /* function submitForm_serch() { var devicdids = $("#deviceid").val(); var search_roles=$("#Poli

Java中文鍵樹的一種實現（附帶模糊查詢功能）

首先在文章的開頭宣告一下哈，本文只是介紹一種Java蠻力鍵樹的實現，並沒有什麼高深的資料結構，所以資料量不超過百萬字元的可以參考，資料量太大的另請高明吧。另外，後面的鍵樹程式碼實際上不僅適用於中文儲存和查詢，只要是字串形式的資料都可以儲存。比如：“鋤禾日當午”、“a+你好啊234#jfjf”這樣形式

使用全文索引技術實現高效的like模糊查詢功能

曾經在工作中遇到了一個難辦的問題：我們有一個表大概有50萬條資料，其中有一個欄位是字串型別需要實現like 模糊查詢，我們使用的是MySQL，雖然已經建立了索引，但是由於使用的是%a%模式匹配，很不給力，在大量併發下，資料庫會掛掉，或者使用者等到抓狂查詢結果還不出來，後來

PB實現庫房臺賬模糊查詢功能

俗話說，天下PB一般醜，←我說的。 PB做出來的介面是真的醜。。先給一張圖吧 簡單的不能再簡單了，那個tab可以更美觀一點，公司的人都是幹了十七八年PB的老員工，問他們這些也不太好意思，是那麼回事就行了，反正實現的功能一樣。。美觀。。是給客戶看的又不是我。。要改再說。 沒寫多少

Hibernate中使用@Query實現模糊查詢功能

用@Query實現模糊查詢功能： 示例程式碼 1、Dao層寫法： @Query("select m from Member m where m.nickname like ?1 escape '/' and m.enabled = true order

JavaScript根據Json數據來做的模糊查詢功能

處理 false 通過 開始 方法 this eve fin 香瓜 類似於百度搜索框的模糊查找功能 需要有有已知數據，實現搜索框輸入字符，然後Js進行匹配，然後可以通過鼠標點擊顯示的內容，把內容顯示在搜索框中 當然了，正則只是很簡單的字符匹配，不具備多麽復雜的判斷 <

【jQuery】利用jQuery實現“記住我”的功能

jquer sms sep jquery實現 .com script lis put bar 【1】先下載jQuery.cookie插件：使用幫助請參考鏈接(https://github.com/carhartl/jquery-cookie)。 【2】安裝插件：

使用PHP+MySql+Ajax+jQuery實現省市區三級聯動功能

b- 發生 sel substr 要求 java true 選中 .ajax 使用PHP+MySql+Ajax+jQuery實現省市區三級聯動功能 要求：寫一個省市區（或者年月日）的三級聯動，實現地區或時間的下拉選擇。 實現技術：php ajax 實現：省級下拉變化時市下拉

jQuery實現購物車計算價格功能的方法

value tle pri 調用 input {} 效果 oat function 本文實例講述了jQuery實現購物車計算價格功能的簡易方法，做的比較簡單，現分享給大家供大家參考。具體如下： 目的： 1 <%@ page language="java" c

jquery 取id模糊查詢

所有 產品 其他 活動 開頭 compare == 不能 ... [屬性名稱] 匹配包含給定屬性的元素[att=value] 匹配包含給定屬性的元素 (大小寫區分)[att*=value] 模糊匹配[att!=value] 不能是這個值[att$=value] 結尾是

jquery中，模糊查詢選擇器，帶 *= 的寫法具體什麼含義？

1、例如： $( "select[id*=ddlcpstyle1]" ) 1）*= 表示選擇 id 中包括 ddlcpstyle1 的 select <select id="AAAddlcpstyle1"></select> <select id="ddlc

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現 實現下拉選單需要用display，即改變display的block或none值。 先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

基於InfluxDB實現分頁查詢功能

  InfluxDB作為時序資料庫中的翹楚，應用範圍非常廣泛，尤其在監控領域。   最近做了一個功能，將InfluxDB中的資料查詢出來後，在前臺分頁展現，比如每頁10條，一共100頁，可以檢視首頁、末頁，進行翻頁：前頁、後頁等。   InfluxDB是時序資料庫，因此時間列

記一次couchdb模糊查詢功能

記一次couchdb模糊查詢 在使用fabric的過程中，避免不了使用couchdb，記錄一次模糊匹配的使用記錄，方便下次查詢。 在couchdb中存的資料結構： type Account struct

MapReduce實現sql的查詢功能

查詢員工表中部門所有人的工資總和 SQL 語句為：select  deptno , sum(sal)  from  emp group by  deptno   order   by deptno; 下面用Map

jQuery實現頁面回到頂部功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>回到頂部</title> <style ty

C#---ASP頁面的下拉框模糊查詢功能

基礎方法支援： 一. DataTable 轉換成 Json 　　換句話說如何在ASP.NET將一個DataTable序列化為 Json陣列，或者如何從一個DataTable返回一個Json字串。　　 　　使用 JavaScriptSerializer. 　　首先我們新增System

Jquery實現自動補全功能

今天因為公司全去搞活動了，所以在網上看了一會兒jquery，在這裡詳細介紹一下基於jquery的autoComplete的實現。 首先，向大家看下自己實現的最簡單的結果： ![簡單效果](https://img-blog.csdn.net/201