m.lom599.com_手机版乐白家网址_乐百家手机首页登录

分享几种比较简单实用的JavaScript,js实现搜索框

作者: 手机版乐白家网址  发布:2019-07-14

使用url传递参数,大家应该不陌生,例如:

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧

只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据。

图片 1

效果图:

既然传递参数,那么自然就要获得传递的参数,当然获取参数的方式有多种多样,下面就介绍其中的一种,和大家一起分享,希望能够给大家带来一定的帮助,代码如下:

方法一:for循环 if判断当前点击与自定义数组是否匹配

图片 2

var url="http://www.softwhy.com/home.php?mod=space&do=home&view=all";
if(url.indexOf("?")!=-1) 
{
var str=url.substr(url.indexOf("?") 1);
strs=str.split("&");
for(i=0;i<strs.length;i  ) 
{
alert(strs.length);
alert(strs[i].split("=")[0]);
alert(strs[i].split("=")[1]);
alert(strs[i].split("=")[0],'=',strs[i].split("=")[1],'<br>');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
  button {
   width:120px;
   height: 32px;
   line-height: 32px;
   background-color: #ccc;
   font-size: 24px;
  }
  div {
   display: none;
   width:200px;
   height: 200px;
   font-size: 72px;
   color:#ddd;
   background-color: green;
   border:1px solid black;
  }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 //定义数组并获取数组内各个的节点
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i  ) {
  buttonArr[i].onclick = function() {
   //this 
   // alert(this.innerHTML)
   //for循环遍历button数组长度
   for(var j = 0; j < buttonArr.length; j  ) {
    //重置所有的button样式
    buttonArr[j].style.backgroundColor = "#ccc";
    //给当前的(点击的那个)那个button添加样式
    this.style.backgroundColor = "yellow";
    //隐藏所有的div
    divArr[j].style.display = "none";
    //判断当前点击是按钮数组中的哪一个?
    if(this == buttonArr[j]) {
     // alert(j);
      //显示点击按钮对应的div
     divArr[j].style.display = "block";
    }
   }
  }
 }
 </script>
</body>
</html> 

代码实例如下:

在以上链接中:

方法二:自定义index为当前点击

<!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"> 
 关键词匹配搜索
 <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.jinxingnb.com/uploads/allimg/190714/0H2305549-2.jpg"></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('约100个' keyword '返回数据1'); 
 aData.push('约200个' keyword '返回数据2'); 
 aData.push('约100个' keyword '返回数据3'); 
 aData.push('约50000个' keyword '返回数据4'); 
 aData.push('约1044个' keyword '2012是真的'); 
 aData.push('约100个' keyword '2012是假的'); 
 aData.push('约100个' keyword '2012是真的'); 
 aData.push('约100个' keyword '2012是假的'); 
 //将返回的数据传递给实现搜索输入框的输入提示js类 
 searchSuggest.dataDisplay(aData); 
} 
</script>
</body>
</html>

1.strs.length的长度是3。
2.strs[0].split("=")[0]是mod,strs[0].split("=")[1]是space。
分享几种比较简单实用的JavaScript,js实现搜索框关键字智能匹配代码。3.strs[1].split("=")[0]是do,strs[1].split("=")[1]是home。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
  button {
   width:120px;
   height: 32px;
   line-height: 32px;
   background-color: #ccc;
   font-size: 24px;
  }
  div {
   display: none;
   width:200px;
   height: 200px;
   font-size: 72px;
   color:#ddd;
   background-color: green;
   border:1px solid black;
  }
 </style>
</head>
<body>
 <button style="background-color: yellow;">1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <div style="display:block;">1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <script type="text/javascript">
 var buttonArr = document.getElementsByTagName("button");
 var divArr = document.getElementsByTagName("div");
 for(var i = 0; i < buttonArr.length;i  ) {
  buttonArr[i].index = i;
  // buttonArr[i].setAttribute("index",i);
  buttonArr[i].onclick = function() {
   for(var j = 0; j < buttonArr.length; j  ) {
    buttonArr[j].style.backgroundColor = "#ccc";
    buttonArr[this.index].style.backgroundColor = "yellow";
    divArr[j].style.display = "none";
    divArr[this.index].style.display = "block";
   }
  }
 }
 </script>
</body>
</html> 

更多关于搜索功能的文章请查看专题《JavaScript搜索功能汇总》

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:分享几种比较简单实用的JavaScript,js实现搜索框

关键词: m.lom599.com