JQ模糊匹配(類似百度搜索等)
CSS程式碼
<style type="text/css">
#div_txt {
position: relative;
width: 200px;
margin: 0 auto;
margin-top: 40px;
}
#txt1 {
width: 99%;
}
#div_items {
position: relative ;
width: 100%;
height: 200px;
border: 1px solid #66afe9;
border-top: 0px;
overflow: auto;
display: none;
}
.div_item {
width: 100%;
height: 20px;
margin-top: 1px ;
font-size: 13px;
line-height: 20px;
}
</style>
$(function(){
//移入移出效果
$(".div_item").hover(function () {
$(this).css('background-color', '#1C86EE').css('color', 'white');
}, function () {
$(this).css('background-color' , 'white').css('color', 'black');
});
//隱藏列表框
$("body").click(function () {
$("#div_items").css('display', 'none');
});
//文字框輸入
$("#txt1").keyup(function () {
$("#div_items").css('display', 'block');//只要輸入就顯示列表框
if ($("#txt1").val().length <= 0) {
$(".div_item").css('display', 'block');//如果什麼都沒填,跳出,保持全部顯示狀態
return;
}
$(".div_item").css('display', 'none');//如果填了,先將所有的選項隱藏
for (var i = 0; i < $(".div_item").length; i++) {
//模糊匹配,將所有匹配項顯示[匹配首字母]
//if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {
//匹配全部文字
if($(".div_item").eq(i).text().indexOf( $("#txt1").val() )!=-1 ){
$(".div_item").eq(i).css('display', 'block');
}
}
});
//項點選
$(".div_item").click(function () {
$("#txt1").val($(this).text());
});
})
<div id="div_txt">
<!--要模糊匹配的文字框-->
<input type="text" id="txt1" />
<!--模糊匹配視窗-->
<div id="div_items">
<div class="div_item">周杰倫</div>
<div class="div_item">周杰</div>
<div class="div_item">林俊杰</div>
<div class="div_item">林宥嘉</div>
<div class="div_item">林妙可</div>
<div class="div_item">唐嫣</div>
<div class="div_item">唐家三少</div>
<div class="div_item">唐朝盛世</div>
<div class="div_item">奧迪A4L</div>
<div class="div_item">奧迪A6L</div>
<div class="div_item">奧迪A8L</div>
<div class="div_item">奧迪R8</div>
<div class="div_item">寶馬GT</div>
</div>
</div>
相關推薦
JQ模糊匹配(類似百度搜索等)
CSS程式碼 <style type="text/css"> #div_txt { position: relative;
實現類似百度搜索框中模糊提示功能
通常,在我們使用百度的時候,在輸入框中輸入某一個欄位的時候,就可以查詢到相關的資訊。類似的功能可以通過JS的框架來實現(顯然不會像百度那麼強大)。jquery提供了一種擴充套件外掛。可以實現獲取文字框內容然後自動向後臺提交請求。下面通過一段程式碼來展示這種功能。
Alfred 3 如何設置默認搜索引擎(以百度搜索為例)
今天 alfred width city search left 屏幕 由於 -o 今天,由於收到UDACITY的微信新聞,關於使用Alfred 工具的介紹,所以一時興起,決定再把Alfred研究一下,以後再慢慢適應使用Alfred,結果花了近2個小時才總算把Alfred默
python3 學習2(分頁翻看百度搜索結果)
# -*- coding: utf-8 -*- from selenium import webdriver import time if __name__ == "__main__": driver = webdriver.Chrome()  
JS實現輸入框類似百度搜索的智慧提示效果
1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Alfred 3 如何設定預設搜尋引擎(以百度搜索為例)
前提條件: Alfred 3 已經安裝在MAC中 首先要有破解的Alfred 3 安裝在MAC PRO中,然後進入到以下欄目:Features-->web Search-->Add Custom Search(根據以下圖來設定) ; 注意:如果需要設定指定在百度中搜索內容,需要設
類似百度搜索下拉框的實現
從百度截圖如下:要實現的功能與該圖類似,只不過沒有詳細優化樣式。哈哈,大家不要介意。(還有我的這個功能用的是百度的介面)我用了兩種方式來實現這個功能,一種是原生的js方式,一種是jQuery的方式。可以對比。1、用原生方式實現。<!DOCTYPE html> &l
java 實現DFA 算法(理論百度搜索)
value orm shm match tco val ltr 實體 ash DFA簡介 DFA全稱為:Deterministic Finite Automaton,即確定有窮自動機。(自己百度吧) 直接代碼: 敏感詞實體類 package com.nopsmile.df
我的第一個自動化腳本(python)----百度搜索
expect style 目錄 .exe nbsp com 自動 其他人 其他 這是一個純小白胡說八道的個人總結,如果有人看到什麽不對的,歡迎批評指正 博客園開通了很久,一直不知道該怎麽去寫,總覺得自己要寫的東西都是別人已經寫過的,我再去寫就是在重復之前人所說,今天去面試和
爬蟲任務二:爬取(用到htmlunit和jsoup)通過百度搜索引擎關鍵字搜取到的新聞標題和url,並保存在本地文件中(主體借鑒了網上的資料)
標題 code rgs aps snap one reader url 預處理 采用maven工程,免著到處找依賴jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:
selenium之百度搜索+有道翻譯的簡單testcase執行-----用例報告(HTMLTestRunner)
file 第一個 stream str utf-8 equal code col sele 本篇主要實現selenium自動化測試之百度搜索+有道翻譯的簡單測試用例執行,並通過HTML TestRunner生成html測試報告.這是前不久跟著視頻學習的時候,練習的第一個HT
java web通過openoffice實現文件網頁預覽(類似百度文庫)
最近研究了一下在網頁上預覽文件(包括office文件和txt、pdf),發現用openoffice+FlexPlayer實現比較理想,就參考了https://blog.csdn.net/ITBigGod/article/details/80300177#commentBox這個部落格自己研究了一下。原始碼
jsonp實現仿百度搜索(跨域訪問)
jsonp實現仿百度搜索 一、jsonp跨域訪問原理 利用script標籤的src屬性的漏洞實現跨域訪問,去訪問不同的伺服器 二、仿百度搜索頁面實現 <!DOCTYPE html> <html> <head> <title>jsonp
HttpClient 實現爬取百度搜索結果(自動翻頁)
如果你對HttpClient還不是很瞭解,建議先移步我的另一篇部落格HttpClient4.x之請求示例後再來看這篇部落格。我們這裡的專案採用maven搭建。在閱讀前要對jdk和maven有一定的瞭解。另外開發工具這裡我這裡使用的是:Spring Tool Suite(STS)當然你也可以使用其
自定義函式實現百度搜索關鍵字在網頁中匹配字元高亮顯示效果
自定義函式實現類似百度搜索關鍵字在網頁中匹配字元高亮顯示效果。完全用php來實現簡單但很有趣的效果。函式如下: <?php /** * @param $wd 搜尋的詞語
網站關鍵詞排名怎麼優化到百度搜索引擎首頁(思維與技巧的結合)
網站的關鍵詞排名優化是我們SEO人員每天工作的事情,做SEO優化說難也不難,說容易也不容易,如果想把網站關鍵詞排名優化到百度首頁,那也要看關鍵詞競爭強度,優化網站的時間,網站權重,SEOer經驗與優化技術等因素能否把網站關鍵詞排名優化到百度首頁。所以想要把關鍵詞排名優化到百度首頁,起碼要清楚百度搜索
jplogicv1.0開發開發案例之知識庫文件資訊索引檢索(類仿百度搜索、類google搜尋)
基於很多專案中都都可能會使用到針對海量文件資訊進行實時檢索的需要!對於使用者而言比較習慣於百度搜索的使用!本文針對海量文件檢索的需求進行描述!針對海量的文件資料我們需要做到最起碼兩點:1、高效索引 2、高效搜尋。當然做到這兩點我們需要在我們的專案中完成多道工序,根據索引框
C# 實現客戶端程式自動更新(百度搜索C#雲更新程式)
http://www.cnblogs.com/jenry/archive/2006/08/15/477302.html 由於微軟提供的更新程式使用不方便,所以又寫了此程式。此程式是本人一年前所寫的一段程式,當時在開發一個CS版本報價系統,當時由於開發過程倉促,程式碼可能有
百度搜索聯想功能(jquery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
一個簡單的百度貼吧爬蟲&&百度搜索爬蟲&&模擬登入菜鳥踩坑記(requests、lxml)
這幾天在學爬蟲,試了下簡單的,不涉及scrapy框架,庫用的lxml、requests,python3,不涉及網頁介面互動。 1、百度貼吧爬蟲 爬取貼吧貼子標題、發貼人資訊(性別、關注貼吧)等,後來根據資料做了個詞雲,程式碼跟詞雲戳下: import os import