jquery實作類似百度的搜尋框
作為一名開發人員，在開發網站的時候搜尋框也是必不可少的一項功能，最近工作中需要做一個搜尋框，類似百度的搜尋框，本文我們就和大家分享關於Jquery實現類似百度的搜尋框。
需要達到兩個功能：
1.輸入關鍵字,展示符合的下拉清單
2.選擇符合的項目後查出相關內容
一般電商網站中也經常用到該搜尋條，首先分析功能實現，輸入關鍵字馬上顯示匹配項列表，實現該功能輸入框需要綁定"input"事件，然後向後台發送異步請求，將數據展示在頁面上。使用滑鼠或上下鍵選擇匹配項，點擊搜尋或"Enter"鍵後搜尋特定結果。這裡要用到兩個非同步請求，第一個請求匹配項，第二個請求搜尋結果。鍵盤，滑鼠以及輸入框的事件都要監聽到，還必須考慮到彈性，也就是適應各種類似需求，想做好還是有一些難度的，下面分佈進行實現。
一.html和css
<body>
<div id="search-form"></div>
</body>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;border:none;}
body {
font-family: "microsoft yahei" !important;
background-color: #FDFFE0;
}
:focus {
outline: none;
}
#search-form {
position: relative;
top: 50px;
display: inline;
}
</style>二.導入css和js檔案
由於部落格上傳不了文件，可以去我的git:http://git.oschina .net/manliu.com/search_frame上有完整的專案文件
三.頁面引用js
<script type="text/javascript">
var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7','17素材网','百度','新浪'];
$(document).ready(function(){
$('#search-form').complete({
searchIn:function(val){//传入输入值，返回匹配值
/* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
return reg.test(val); */
var word = "^"+val+".*";
var rs = [];
$.each(proposals,function(i,n){
if(n.match(word)){
rs.push(n);
}
});
return rs;
},
width:400,
height: 30,
submitIn: function(text){//搜索选定的值
alert(text);
}
});
});
</script>這裡searchIn方法用於傳回符合項，通常在裡面定義一個非同步請求，向後台取數據，傳回一個數組，對於複雜的還需要修改源碼；submitIn用於搜尋匹配的結果，一般可異步請求也可同步請求。
以上內容就是關於query實作類似百度的搜尋框的教程，希望能幫助大家。
相關推薦：
以上是jquery實作類似百度的搜尋框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
2 個月不見，人形機器人 Walker S 會摺衣服了
Apr 03, 2024 am 08:01 AM
機器之能報道編輯：吳昕國內版的人形機器人+大模型組隊，首次完成疊衣服這類複雜柔性材料的操作任務。隨著融合了OpenAI多模態大模型的Figure01揭開神秘面紗,國內同行的相關進展一直備受關注。就在昨天，國內"人形機器人第一股"優必選發布了人形機器人WalkerS深入融合百度文心大模型後的首個Demo，展示了一些有趣的新功能。現在，得到百度文心大模型能力加持的WalkerS是這個樣子的。和Figure01一樣，WalkerS沒有走動，而是站在桌子後面完成一系列任務。它可以聽從人類的命令，折疊衣物
百度Apollo重磅發表全球首個支援L4級自動駕駛的大模型Apollo ADFM
Jun 04, 2024 pm 08:01 PM
5月15日，百度Apollo在武漢百度蘿蔔快跑汽車機器人智行谷舉辦ApolloDay2024，全方位展示百度十年深耕自動駕駛的重大進展，基於大模型帶來技術階躍、面向乘客安全全新定義的無人車和全球最大的無人車自動營運網絡，百度已經做到自動駕駛比人類駕駛更安全。得益於此，更安全舒適、綠色低碳的出行方式正從理想成為現實。百度集團副總裁、智慧駕駛事業群組總裁王雲鵬現場表示：「我們做無人車的初衷，是滿足老百姓日益增長的、對美好出行的嚮往，人民群眾的滿意是我們前進的動力。因為安全、所以美好，我們欣喜地看到
阿里雲盤怎麼搜尋別人的資源
Mar 30, 2024 am 10:31 AM
阿里雲盤，這款備受歡迎的儲存工具，不僅可以幫助我們有效率地管理個人資源，還提供了許多便利功能。那麼許多用戶在搜尋雲盤資源的時候，可能會搜不到，所以想要搜尋全盤的所有資源，那麼在下文中就由本站小編來為大家詳細解答這一問題，分享具體的搜尋方法，想要了解的使用者就快來跟著本文一起操作了解吧！阿里雲盤搜怎麼索別人的資源1、先在阿里雲盤的資料夾目錄中搜尋資源檔案的具體路徑即可找到對應的資料夾了。 2.然後使用文件搜尋功能，輸入想要尋找的關鍵字即可找到相關的文件內容。 3.接著我們透過其他人分享鏈接，直接定位和下
百度李彥宏率隊拜訪中國石油，討論油氣產業智慧化
May 07, 2024 pm 06:13 PM
本站5月7日消息，5月6日，百度創辦人、董事長兼執行長李彥宏帶隊在北京拜訪中國石油天然氣集團有限公司（以下簡稱「中國石油」），並與中國石油集團董事長、黨組書記戴厚良舉行會談。雙方就強化合作，推動能源產業與數位化智慧化深度融合進行了深入交流。中國石油將加速推動數位中中國石油建設，加強與百度集團合作，推動能源產業與數位化智慧化的深度融合，為保障國家能源安全做出更大貢獻。李彥宏表示，大模型展現的「智慧湧現」與理解、生成、邏輯、記憶等核心能力，為前沿科技與油氣業務結合開啟了更廣闊的想像空間。一直
deepseek網頁版入口 deepseek官網入口
Feb 19, 2025 pm 04:54 PM
DeepSeek 是一款強大的智能搜索與分析工具，提供網頁版和官網兩種訪問方式。網頁版便捷高效，免安裝即可使用；官網則提供全面產品信息、下載資源和支持服務。無論個人還是企業用戶，都可以通過 DeepSeek 輕鬆獲取和分析海量數據，提升工作效率、輔助決策和促進創新。
百度息壤貝殼取得方法介紹
Mar 28, 2024 am 09:11 AM
在息壤中有不少用戶不知道貝殼在哪裡，怎麼才能獲得，有些玩家轉了幾個小時候都沒有找到，下面小編就帶來了百度息壤貝殼的獲取方法，快來一起看看吧。百度息壤貝殼怎麼獲得1、首先我們需要來到社區，然後來到下圖的這個位置。 2、在這裡選擇目的地，選擇進入188樓。 3.進入188層後，在周圍轉悠會有這個提示，點擊我知道了就行。 4.貝殼的位置可能會有些難找，就在188電梯的後面，有個發光的小點就是貝殼。 5.撿貝殼要用VR把手才能撿，點擊貝殼就可以了。兌換方式1、先點選頁面右上方的「設定」圖標，在設定中選擇「
消息指出三星 Galaxy S24 系列手機國行版「即圈即搜」將支援Google搜尋
Jun 01, 2024 am 09:54 AM
5月31日消息，根據部落客@i冰宇宙今日爆料，三星GalaxyS24系列手機國行版「即圈即搜」將支援Google搜尋。具體上線時間，該部落客並未透露。根據三星先前介紹，三星GalaxyS24系列實裝了眾多高階AI能力，將輸入、翻譯、錄音機、筆記、相機等實用功能AI化，為使用者帶來更方便、更有效率的綜合體驗。與海外版不同的是，三星GalaxyS24系列的AI功能大多由國內廠商提供服務，例如百度等。先前報導，GalaxyAI深度整合百度文心大模型多項能力，可提供端側賦能的通話、翻譯功能，以及借助生成式AI帶來的智能摘
ai工具推薦
Nov 29, 2024 am 11:08 AM
本文介紹了六款受歡迎的 AI 工具，包括抖音豆包、文心一格、騰訊智影、百度飛槳 EasyDL、百度 AI Studio 和訊飛星火認知大模型。這些工具涵蓋不同的功能，如文字創作、圖像生成、影片編輯和 AI 模型開發。選擇合適的 AI 工具需要考慮功能需求、技術水平和成本預算等因素。這些工具為需要 AI 輔助的個人和企業提供了方便且有效率的解決方案。
