js實作搜尋框關鍵字智慧匹配程式碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js實作搜尋框關鍵字智慧匹配程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

js 關鍵字搜尋框

只要使用搜尋引擎的朋友應該都有這樣的體會，就是當在搜尋框輸入關鍵字的時候，會出現自能匹配現象，這絕對是非常好的用戶體驗，下面就是一段類似的程式碼，當然這裡只是掩飾，所以只能匹配的資料都是本地固定好的，在實際應用中可以才能夠資料庫讀取資料。

效果圖：

程式碼實例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>搜索框关键字智能匹配实例代码</title>
<style>
body, ul, li 
{
 margin:0;
 padding:0;
}
body 
{
 font-size:12px;
 font-family:sumsun, arial;
 background:#FFFFFF;
}
.gover_search 
{
 position:relative;
 z-index:99;
 height:63px;
 padding:15px 0 0 20px;
 border:1px solid #b8cfe6;
 border-bottom:0;
 background:url(../images/gover_search_bg.gif) repeat-x 0 0;
}
.gover_search_form {height:36px;}
.gover_search .search_t 
{
 float:left;
 width:112px;
 line-height:26px;
 color:#666;
}
.gover_search .input_search_key 
{
 float:left;
 width:462px;
 height:18px;
 padding:3px;
 margin-right:5px;
 border:1px solid #ccc;
 line-height:18px;
 background:#fff;
}
.gover_search .search_btn 
{
 float:left;
 width:68px;
 height:26px;
 overflow:hidden;
 border:1px solid #ccc;
 text-align:center;
 color:#ff3300;
 letter-spacing:5px;
 background:url(../images/gover_search_bg.gif) no-repeat 0 -79px;
 cursor:pointer;
 font-weight:bold;
}
.gover_search .search_suggest 
{
 position:absolute;
 z-index:999;
 left:132px;
 top:41px;
 width:468px;
 border:1px solid #ccc;
 border-top:none;
 display:none;
 color:#004080;
}
.gover_search .search_suggest li 
{
 height:24px;
 overflow:hidden;
 padding-left:3px;
 line-height:24px;
 background:#fff;
 cursor:default;
}
.gover_search .search_suggest li.hover {background:#ddd;}
.num_right 
{
 float:right;
 text-align:right;
 line-height:24px;
 padding-right:10px
}
</style>
</head>
<body>
<div class="gover_search">
 <div class="gover_search_form clearfix"> 
  <span class="search_t">关键词匹配搜索</span>
  <input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" />
  <button type="submit" class="search_btn">搜索</button>
  <div class="search_suggest" id="gov_search_suggest">
   <ul>
   </ul>
  </div>
 </div>
</div>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
function oSearchSuggest(searchFuc)
{ 
 var input = $('#gover_search_key'); 
 var suggestWrap = $('#gov_search_suggest'); 
 var key = ""; 
 var init = function(){ 
  input.bind('keyup',sendKeyWord); 
  input.bind('blur',function(){setTimeout(hideSuggest,100);}) 
 } 
 var hideSuggest = function(){ 
  suggestWrap.hide(); 
 } 
 //发送请求，根据关键字到后台查询 
 var sendKeyWord = function(event){ 
  //键盘选择下拉项 
  if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40)
  { 
   var current = suggestWrap.find('li.hover'); 
   if(event.keyCode == 38)
   { 
    if(current.length>0)
    { 
     var prevLi = current.removeClass('hover').prev(); 
     if(prevLi.length>0)
     { 
      prevLi.addClass('hover'); 
      input.val(prevLi.html()); 
     } 
    }
    else
    { 
     var last = suggestWrap.find('li:last'); 
     last.addClass('hover'); 
     input.val(last.html()); 
    } 
   }
   else if(event.keyCode == 40)
   { 
    if(current.length>0)
    { 
     var nextLi = current.removeClass('hover').next(); 
     if(nextLi.length>0)
     { 
      nextLi.addClass('hover'); 
      input.val(nextLi.html()); 
     } 
    }
    else
    { 
     var first = suggestWrap.find('li:first'); 
     first.addClass('hover'); 
     input.val(first.html()); 
    } 
   } 
   //输入字符 
  }
  else
  { 
   var valText = $.trim(input.val()); 
   if(valText ==''||valText==key)
   { 
    return; 
   } 
   searchFuc(valText); 
   key = valText; 
  } 
 } 
 //请求返回后，执行数据展示 
 this.dataDisplay = function(data){ 
  if(data.length<=0)
  { 
   suggestWrap.hide(); 
   return; 
  } 
  //往搜索框下拉建议显示栏中添加条目并显示 
  var li; 
  var tmpFrag = document.createDocumentFragment(); 
  suggestWrap.find('ul').html(''); 
  for(var i=0; i<data.length; i++)
  { 
   li = document.createElement('LI'); 
   li.innerHTML = data[i]; 
   tmpFrag.appendChild(li); 
  } 
  suggestWrap.find('ul').append(tmpFrag); 
  suggestWrap.show(); 
  //为下拉选项绑定鼠标事件 
  suggestWrap.find('li').hover(function(){ 
   suggestWrap.find('li').removeClass('hover'); 
   $(this).addClass('hover'); 
  },function(){ 
   $(this).removeClass('hover'); 
  }).bind('click',function(){ 
   $(this).find("span").remove(); 
   input.val(this.innerHTML); 
   suggestWrap.hide(); 
  }); 
 } 
 init(); 
}; 
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名 
var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 
//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 
//参数为一个字符串，是搜索输入框中当前的内容 
function sendKeyWordToBack(keyword){ 
 var aData = []; 
 aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据1'); 
 aData.push('<span class="num_right">约200个</span>'+keyword+'返回数据2'); 
 aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据3'); 
 aData.push('<span class="num_right">约50000个</span>'+keyword+'返回数据4'); 
 aData.push('<span class="num_right">约1044个</span>'+keyword+'2012是真的'); 
 aData.push('<span class="num_right">约100个</span>'+keyword+'2012是假的'); 
 aData.push('<span class="num_right">约100个</span>'+keyword+'2012是真的'); 
 aData.push('<span class="num_right">约100个</span>'+keyword+'2012是假的'); 
 //将返回的数据传递给实现搜索输入框的输入提示js类 
 searchSuggest.dataDisplay(aData); 
} 
</script>
</body>
</html>

登入後複製

希望本文所述對大家學習javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

解決win10搜尋框變灰無法使用的方法 Jan 03, 2024 am 11:07 AM

當使用者日常使用win10搜尋框搜尋內容和需要的軟體時，發現了win10搜尋框灰色不能用了的問題，一般在電腦策略群組中將設定成停用即可，下面一起看看win10搜尋框灰色不能用解決方法。 win10搜尋框灰色不能用解決方法：1、按下win+R鍵，開啟執行輸入gpedit.msc。 2、在本機群組原則編輯器－選擇管理範本－windows元件選項。 3、找到搜尋－允許使用Cortana這個選項。 4.開啟後在其頁面選擇已停用，點選確定即可，重新啟動電腦。

如何設定Windows 10搜尋欄為透明 Jan 09, 2024 pm 09:46 PM

有些用戶看到win10搜尋框都是透明的，自己也想擁有，但是不知道怎麼設置，現在有一個非常簡單的方法，只要在win10商店下載軟體即可，下面我們一起看看win10搜尋框設置透明的方法吧。 win10搜尋框透明：1、右鍵點選工作列選擇搜索，將搜尋框變成搜尋圖示。 2、打開應用程式商店。 3.搜尋TranslucentTB軟體。（可以選擇下載漢化版）4、下載安裝好之後。 5.打開TranslucentTB，在右下方的工作列可以看到。 6、將它設定成全透明即可。

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

深入解析C語言中static關鍵字的作用與用法 Feb 20, 2024 pm 04:30 PM

深入解析C語言中static關鍵字的功能和用法在C語言中，static是一種非常重要的關鍵字，它可以被用於函數、變數和資料類型的定義。使用static關鍵字可以改變物件的連結屬性、作用域和生命週期，以下就來詳細解析一下static關鍵字在C語言中的作用和用法。 static變數與函數：在函數內部使用static關鍵字定義的變數稱為靜態變量，它具有全域生命週

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

js實作搜尋框關鍵字智慧匹配程式碼_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題