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邮箱登陆入口在哪里

7426

CakePHP 教程

1359

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐：优秀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 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍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、将它设置成全透明即可。

解决win10搜索框无响应的方法 Jan 03, 2024 am 09:44 AM

用户在使用win10搜索出现卡死的问题，导致搜索功能不能使用，只要强制关机重新，那么该怎么解决此问题呢，下面我们就一起看看win10搜索框卡死解决方法吧！win10搜索框卡死：1、点击搜索后卡死，可以能是未响应了，可以等待一下。2、如果等待了一会之后还是卡死，那么右击任务栏打开任务管理器，重新启动一下windows资源管理器。3、打开搜索设置，将权限和历史记录项下的安全搜索关闭，把云搜索也关闭。

深入解析C语言中static关键字的作用和用法 Feb 20, 2024 pm 04:30 PM

深入解析C语言中static关键字的作用和用法在C语言中，static是一种非常重要的关键字，它可以被用于函数、变量和数据类型的定义上。使用static关键字可以改变对象的链接属性、作用域和生命周期，下面就来详细地解析一下static关键字在C语言中的作用和用法。static变量和函数：在函数内部使用static关键字定义的变量称为静态变量，它具有全局生命周

See all articles

js实现搜索框关键字智能匹配代码_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题