仿百度下拉关键词,和关键词的小demo
自己做项目时用到的仿百度下拉关键词
代码:
$(function(){
var oTxt = document.getElementById('search_text');
oTxt.onkeyup = function() {//键盘抬起,输入第一个字母就开始执行函数
var val = this.value;
var oScript = document.createElement('script');
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=hhl"
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}
//鼠标离开联想词关闭
$("body").click(function(){
$("#list").css({"display":"none"})
})
});
本地测试写的关键词小demo
代码:
HTML:
<input type="text" id="text1"/>
<div id="div1"></div>
JS:
var arr=["Java","JavaScript","java课程"]
//区分大小写的关键词
var text1= document.getElementById('text1')
var div1=document.getElementById("div1")
text1.onkeyup=function () {
//鼠标抬起获取输入框的值
var str=this.value;
var txt=""
for(var i in arr){
var s=arr[i]
//循环遍历arr词库全转化为小写如果词库里面的词存在与输入值一样的,那么他的索引值肯定存在即>-1
if (s.toLowerCase().indexOf(str.toLowerCase())>-1){
//替换词库里词语搜索框对应的字母后跟一个回调函数让其高亮显示
txt+=s.replace(eval("/"+str+"/i"),function(w){return "<mark>"+w+"</mark>"})+"<br>"
}
}
//将关键词附在输入框下面的div里
div1.innerHTML=txt;
}
仿百度下拉关键词,和关键词的小demo的更多相关文章
- dedecms首页搜索 添加仿百度下拉框
1:找到uploads/templets/default/head.htm 2: 找到 <input name="q" type="text" clas ...
- 【亲测好用!】shell批量采集百度下拉框关键词
[亲测好用!]shell批量采集百度下拉框关键词 SEO工具 方法 11个月前 (11-18) 2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...
- vue的jsonp百度下拉菜单
通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- [RN] React Native 仿美团下拉筛选菜单控件
React Native 仿美团下拉筛选菜单控件 演示效果如下: 使用方法如下: 1.安装 npm install react-native-dropdownmenus --save react-na ...
- vue实现百度下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 仿select下拉框
默认状态下,灰色面板出现.当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失. 主要考察:事件冒泡与取消事件冒泡. 代码: <!DOCTYPE ...
- 高仿IOS下拉刷新的粘虫效果
最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...
随机推荐
- MongoDB快速入门(三)- 集合
创建集合 MongoDB 的 db.createCollection(name, options) 用于创建集合. 在命令中, name 是要创建集合的名称. Options 是一个文档,用于指定集合 ...
- poj 1905 Expanding Rods(木杆的膨胀)【数学计算+二分枚举】
...
- setfacl设置特定目录的权限
现有一目录是虚拟机和linux共享的,但是每次程序调用新建的文件都发现没有权限. 于是指定特定目录及其子目录下新建的文件或目录对于用户qhfz都有读写执行的权限 -R表示递归 -m表示设置文件acl规 ...
- python的pexpect详解
Pexpect 是一个用来启动子程序并对其进行自动控制的纯 Python 模块. Pexpect 可以用来和像 ssh.ftp.passwd.telnet 等命令行程序进行自动交互.继第一部分< ...
- HTML中table边框的显示总结
一.1.显示表格的4个边框:<table border frame=box>2.只显示上边框: <table border frame=above>3.只显示下边框: < ...
- Linux嵌入式 -- 内核 (arm) & 文件系统
1. make distclean 2. 配置内核 ----> 生成 .config文件 make menuconfig ARCH=arm Makefile文件分析: 3. 编译内核 mak ...
- Regular Expression Matching,regex,正则表达式匹配,利用动态规划
问题描述:Implement regular expression matching with support for '.' and '*'. '.' Matches any single char ...
- js模板方法
模板方法模式,定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤.模板方法模式把不变行为搬到超类中,从而去除了子类中的重复代码 ...
- Eclipse下创建简单Servlet
参考文章:一个简单的Servlet程序 http://blog.csdn.net/a153375250/article/details/50916428 Servlet简介 Servlet是什么?简 ...
- Codeforces 888D Almost Identity Permutations:错排公式
题目链接:http://codeforces.com/problemset/problem/888/D 题意: 给定n,k,问你有多少种1到n的排列,满足至少有n-k个a[i] == i. (4 &l ...