2. 程式人生 > >jQuery實現自動提示，分類選擇等功能的搜尋框

jQuery實現自動提示，分類選擇等功能的搜尋框

阿新 • • 發佈：2019-02-13
//初始條件 //高亮 var highLight={ 'background-color':'#0099FF', 'color':'white' } //預設亮度 var faultLight={ 'color':'#000', 'background-color':'#FFF' } var keyType="resource"; var sortValue="publishDatetime"
; $(function(){ $("#resource").css(highLight); $("#publishDatetime").css(highLight); //把搜尋型別按鈕 繫結點選事件 $("#search-list li").click(function(){ var $this=$(this); keyType=$this["0"].attributes["1"].value if(keyType=="requirement"){ $("#buyCount"
).hide(); if(sortValue=="buyCount"){ sortValue="publishDatetime"; $("#publishDatetime").css(highLight); } }else{ $("#buyCount").show(); } $this.css('background-color','#13c5c4'
) $("#search-list li").css(faultLight); $this.css(highLight); console.log($this["0"].attributes["1"].value); $("#ss").click(); }); //把排序方式 繫結點選事件 $("#search-sort li").click(function(){ var $this=$(this); sortValue=$this["0"].attributes["1"].value $("#search-sort li").css(faultLight); $this.css(highLight) console.log(sortValue); $("#ss").click(); }); //繫結回車事件，有問題 $("body").keydown(function() { if(event.keyCode=="13"){ $("#ss").click(); } }); $("#ss").click(function(){ // 載入 var dialog = bootbox.dialog({ message: '<p><i class="fa fa-spin fa-spinner"></i> 載入中...</p>', closeButton: false }); var pageNo=$("#hidCurrentPage").val(); var keyWord=$('#search_input').val(); if(keyWord.length==0){ dialog.modal('hide');// 載入結束 }else{ if(pageNo==''||typeof(pageNo)==undefined){ $.ajax({ url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action', type:'POST', data:{ pageNo:1, keyType:keyType, keyWord:keyWord, sortValue:sortValue }, success:function(data){ $('#110').html(data); dialog.modal('hide');// 載入結束 }, error:function(){ dialog.modal('hide');// 載入結束 errorTip();//出錯提示 }, }); }else{ $.ajax({ url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action', type:'POST', data:{ pageNo:pageNo, keyType:keyType, keyWord:keyWord, sortValue:sortValue }, success:function(data){ $('#110').html(data); dialog.modal('hide');// 載入結束 }, error:function(){ dialog.modal('hide');// 載入結束 errorTip();//出錯提示 }, }); } } }) }) //跳轉頁面的方法 $(function ttt(){ var keyWord=""; var url = location.search if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("="); keyWord=strs[1]; $('#search_input').val(keyWord); $("#ss").click(); } console.log(keyWord); }) //自動提示——搜尋框 $(function(){ $('#search_input').bind('input propertychange click',function(){ var searchText =$('#search_input').val(); if($.trim(searchText)=="" ){ $('#search-suggest').hide(); }else{ $.get('${pageContext.request.contextPath}/bid/reAction_autoComplete.action?keyWord='+searchText+'&keyType='+keyType,function(d){ var d=d; var html=''; console.log(d); for(var i=0;i<d.length;i++){ html+= '<li>'+d[i].searchText+'</li>' ; } var inputBoxW=$('#search_input').outerWidth(true); var inputBtnW=$('#ss').outerWidth(true); $('#search-result').html(html); $('#search-suggest').show().css({ top:$('#search-form').offset().top+$('#search-form').height(), left:$('#search-form').offset().left, position:'absolute', width:inputBoxW-inputBtnW }); $("#search-result li").click(function(){ var $this=$(this); console.log($this["0"].innerText); $('#search_input').val($this["0"].innerText); $("#ss").click(); }); },'json'); } }) }) $(function(){ $(document).bind('click',function(){ $('#search-suggest').hide(); }); }) $(function(){ //二級標題 $("#current").empty(); var url = location.pathname; console.log(url.split('/')); if(url.split('/')[2]=="searchResult"){ var html="<strong>搜尋結果 </strong>"; $("#current").append(html); } var allH = $(window).outerHeight(true);//總高度 var footerH =$('#footer').outerHeight(true);//底部高度 var headH =$('#head-bar-area').outerHeight(true);//導航高度 var loginH =$('#head-login-area').outerHeight(true);//登入高度 $('#searchResultArea').css('min-height',allH-footerH-headH-loginH-30); }) //錯誤頁面執行 function errorTip(){ var dialog = bootbox.dialog({ message: '<i class="glyphicon glyphicon-remove-sign text-danger"></i>未知錯誤！頁面將在3秒後重新整理<i class="fa fa-spin fa-spinner"></i>，如果沒有，<a href="/DataMarket/index">請點選此處重新整理</a>', closeButton: false }); dialog.init(function(){ setTimeout(function(){ location.href ="${pageContext.request.contextPath}/index"; }, 3000); }); }

相關推薦

jQuery實現自動提示，分類選擇等功能的搜尋框

//初始條件 //高亮 var highLight={ 'background-color':'#0099FF', 'color':'white' } //預設亮度

登陸一個系統時，前端js實現的驗證，記住密碼等功能

con hold div plain class submit nts 設置 發生 記住密碼部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

利用openCV實現自動抓拍，人臉識別，清晰度的驗證等

atom load 進行 fork focus 講解 only async lan 1、本文主要涉及到opencv的視頻幀抓拍和驗證的相關問題，不包含如何集成opencv 2、主要講解涉及到opencv中的關鍵類及一些常用的方法 3、著重講解代理方法： - (void)p

購物車功能：使用jQuery實現購物車全選反選，單選，商品增刪，小計等功能

效果圖： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬購物車功能-jq</title>

【輸入智慧提示功能】PHP+jQuery實現自動補全功能

前面手工寫了一個下拉自動補全功能，寫的簡單，只實現了滑鼠選擇的功能，不支援鍵盤選擇。由於專案很多地方要用到這個功能，所以需要用心做一下。發現select2這個外掛的功能可以滿足當前需求。 在使用jquery外掛select2的過程中遇到了一些疑惑，無論是穿json資料還

CodeIgniter代碼自動提示，親測支持PHPStrom NetBeans

blank images file 目錄 alt libraries files 下載 -1 網上搜了很多，有些不支持$this->db，有些不能用，找了其中一個，自己改了下，現在能正常使用了 使用方法：點擊下載文件，解壓到application\libraries目

Gradle實現自動打包，簽名，自定義apk文件名

回車 應用 types 背包 sdn 部署 密鑰對 另一個 密鑰庫 Gradle實現自動打包，簽名，自定義apk文件名 什麽是簽名，簽名有什麽用 Android APP都需要我們用一個證書對應用進行數字簽名，不然的話是無法安裝到Android手機上的，平時我們調試運行時到手

純前端表格控制元件SpreadJS與Java結合，實現模板上傳和下載等功能

安裝部署: 開發環境： 後臺伺服器端採用 Java 、SpringMVC。 資料儲存到 \demo_web\WEB-INF\FileDatabase.txt 檔案中，不需要依賴DB。 採用 Eclipse Java EE IDE for Web Develope

[轉]jquery設定select選中，賦值等操作

一、基礎取值問題 例如<select class="selector"></select> 1、設定value為pxx的項選中      $(".selector").val("pxx"); 2、設定text為pxx的項選中  

Python實現自動登入，強行突破圖形驗證碼！

  驗證碼有圖形驗證碼、極驗滑動驗證碼、點觸驗證碼、宮格驗證碼。這回重點講講圖形驗證碼的識別。 學習Python中有不明白推薦加入交流群                 號：516107834 &

Solr結合Auto Complete實現自動提示

前言 在日常經常使用的搜尋中，我們經常會看到下面這種頁面。這種智慧提示，會向用戶友好的推薦可能使用者想查詢的關鍵詞。 不管是solr還是ES，實現上面這種效果的方式有很多，這裡主要是結合solr和jquery中的Autocomplete來實現上面的效果。 Solr中的智慧提示配

jquery實現橫向tab，滑動tab時內容左右滑動

最近寫一個電商的網站，要相容ie8。所以用的jquery，很久沒用jquery了，寫一個效果都很傷腦。 橫向tab,滑動tab時內容左右滑動出現 首先是html程式碼 <div class="container"> <div class=

angular實現全選，反選，批量刪除，刪除，全不選，倒序，模糊查詢等功能

效果圖如下： html程式碼如下： <body ng-app="myApp" ng-controller="myCtrl"> <button ng-click="dx(seq)">倒序</button> <butto

Android多點觸控技術，實現對圖片的放大縮小平移，慣性滑動等功能

首先推薦一下鴻洋大大的打造個性的圖片預覽與多點觸控視訊教程，這套教程教我們一步一步實現了多點觸控實現對圖片的平移和縮放的功能，這篇文章我將在鴻洋大大的基礎之上做了一些擴充套件功能： 1.圖片的慣性滑動 2.圖片縮放小於正常比例時，鬆手會自動回彈成正常比例

Android Studio使用Gradle實現自動打包，簽名，自定義apk檔名，多渠道打包，整合系統簽名證書【附效果圖附原始碼】

        接觸Android Stuidio有一陣子了，之前用的時候有很多小問題，不過現在的版本感覺已經很好用了，所以準備徹底從Eclipse轉戰Android Stuidio，這段時間把以前經常使用的公用庫都從Eclipse移植過來了，今天研究了一下在Andro

android AutoCompleteTextView 實現輸入提示，類似百度支援輸入拼音提示中文（gray）

 android 的 AutoCompleteTextView 控制元件實現了輸入框的輸入提示功能，這個功能更加使用於國外的手機使用者來使用。而很多時候國人更多的是要象百度那樣我輸入的是拼音也能將中文提示出來，如：輸入xinlang  就能提示：新浪、新浪微博等。又或者

jquery實現select裡面不能選擇重複option的內容

//選中的訂單不能重複 function selectOption(types){ //alert($(types).children("option:selected").index()); var indexs = $(types).children("option:selec

linux shell ssh實現自動登入，並且執行一些操作並返回到當前主機

#!/usr/bin/expect -f #-------------------------------------------------- about us # product: monitorone # Author:matthew # Last Modified:

用Jquery實現自動填充

//js前臺程式碼<head id="Head1" runat="server"> <title>google</title> <link href="css/jquery.autocomplete.css" rel

打造強大的BaseModel（2）：讓Model實現自動對映，將字典轉化成Model

這篇文章將講述Model一項更高階也最常用的功能，讓Model實現自動對映–將字典轉化成Model(所有程式碼全由Swift實現) 將JSON轉化為Model的意義 在iOS開發中，基於Model的資料流起到了至關重要的作用。從網路獲取的資料需要進一步處理轉到成View可用的