JS实现关键字搜索时的相关下拉字段效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Hello World</title>
<link href="style.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script type="text/javascript">
sources= new Array("www.sina.com","www.baidu.com","www.google.com","www.sina.org","www.baidu.ogr.cn");
tabinfo = "";
flag = new Array(sources.length);
for(var i=0;i<flag.length;i++)
flag[i] = false ;
function immediately(){
var element = document.getElementById("i1");
if("\v"=="v") {
element.onpropertychange = webChange;
}else{
element.addEventListener("input",webChange,false);
}
function webChange(){
var tab = document.all("dl1");
for(var i=0;i<flag.length;i++)
flag[i] = false ;//重新初始化
if(element.value){
var content = document.getElementById("i1").value;
for(var i = 0 ;i < sources.length ; i ++){
if(sources[i].indexOf(content) != -1){
flag[i] = true;
}
}
for(var j=0;j<flag.length;j++){
if(flag[j]){//sources[j]有与文本框文字相同的内容
if(tab.rows.length>0){
for(var k=0;k<tab.rows.length;k++)
if(tab.rows[k].cells[0].innerText.indexOf(content) == -1)
tab.deleteRow(k);
}
for(var k=0;k<tab.rows.length;k++){
tabinfo += tab.rows[k].cells[0].innerText;
}
if(tabinfo.indexOf(sources[j]) == -1){
nrow = tab.insertRow(0);
newcell = nrow.insertCell();
newcell.innerHTML = sources[j]
}
tabinfo = "";
}
}
}
}
}
</script>
<script language="javascript">
var lastObj=null;
function backBlack(){
event.srcElement.style.background="gray";
forceBackC6();
if(event.srcElement.tagName=="TD"){
lastObj=event.srcElement;
}
fillData();
}
function backC6(){
event.srcElement.style.background="#CCCCCC";
}
function forceBackC6(){
if(lastObj!=null)
lastObj.style.background="#F8F8FF";
}
function fillData(){
if(lastObj.innerHTML!=null)
document.all.i1.value=lastObj.innerHTML;
}
function init(){
Layer1.style.top=i1.offsetTop+40;
Layer1.style.left=i1.offsetLeft;
Layer1.style.visibility="visible";
}
function hideBelow(){
Layer1.style.visibility="hidden";
}
</script>
</head>
<body>
<input type="text" id="i1" style="height:20px" onFocus="init()" onBlur="hideBelow()" />
<script type="text/javascript">
immediately();
</script>
<div id="Layer1">
<table id="dl1" class="midHead" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()" border="0" >
</table>
</div>
<br>
</body>
</html>
相关推荐
-
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索 如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可 无论原来还是自定义加入的关键词 如果已存在 她会提示... 实现: 复制代码 代码如下: <script type="text/javascript" src=&qu
-
javascript 自动标记来自搜索结果页的关键字
/*定义样式*/ .hilite1{background:#69c;} Hilite = { exact: true, max_nodes: 1000, style_name: 'hilite', style_name_suffix: true }; Hilite.hiliteElement = function (elm, query) { if (!query || elm.childNodes.length == 0) return; query = query.split(/[\s,\+
-
Jquery插件仿百度搜索关键字自动匹配功能
本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr
-
用JS将搜索的关键字高亮显示实现代码
用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
-
js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co
-
jQuery实现搜索页面关键字的功能
在一篇文章中查找关键字,找到后高亮显示. 具体代码: <html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <bo
-
基于jQuery实现搜索关键字自动匹配功能
今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut
-
JQuery+JS实现仿百度搜索结果中关键字变色效果
1.源码 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); function setHeightKeyWord(id, keyword
-
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>
-
JS实现关键字搜索时的相关下拉字段效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel=
-
angularJs-$http实现百度搜索时的动态下拉框示例
实例如下所示: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ overflow: hidden; margin-top: 50px; margin-left: 500px; } .con
-
js制作的鼠标悬浮时产生的下拉框效果
先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea
-
.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox. 具体实现思路:一个input,当输入值变化时,调用后台代码.但是怎么调用呢,这个是个问题了,在该input下放一个隐藏的服务器控件button,隐藏该控件,当input里值变化时,调用js,在js里触发该按钮的onclick
-
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": <div id="divContainer"> <a name="link"> -->报错处 第三方插件内容- </a> </div> 原因: 所设置
-
JS模拟bootstrap下拉菜单效果实例
本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的
-
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>
-
JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮助. ---搜索框模糊查询带下拉匹配效果html--- <!------------搜索框模糊查询带下拉匹配效果html----------------------> <div class="gover_search"> <div class="go
-
js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:
-
JS实现的5级联动Select下拉选择框实例
本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se