本文目录一览：
- 1、html中搜索框怎么做
- 2、js搜索框代码
- 3、静态网页如何用js实现查找功能？
- 4、怎么用html5+js+css实现如图所示的搜索下拉框，谢谢
- 5、网页制作 html,js搜索中的下拉菜单是怎么出来的
- 6、静态网页中如何用js实现搜索功能？
html中搜索框怎么做
用input标签就行，上午回答了知道里面一个童鞋同样的问题，代码同样给你哈
!DOCTYPE html
html
head
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
titleExamples/title
meta name="description" content=""
meta name="keywords" content=""
link href="" rel="stylesheet"
style type="text/css"
#box{
width: 380px;
margin: 30px auto;
font-family: 'Microsoft YaHei';
font-size: 14px;
}
input{
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
}
#search{
width: 78px;
height: 32px;
float: right;
background: black;
color: white;
text-align: center;
line-height: 32px;
cursor: pointer;
}
/style
/head
body
div id="box"
input type="text" name="search" placeholder="请输入关键字"
div id="search"搜索/div
/div
/body
/html
js搜索框代码
/* 问题不够明确 */
input class="ipt_search" type="search" placeholder="请输入搜索内容"/
script
/* 搜索input */
var searchIpt = document.getElementsByClassName('ipt_search')[0];
/* 搜索内容 */
var searchValue = searchIpt.value;
/script
静态网页如何用js实现查找功能？
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
html
head
title New Document /title
meta name="Generator" content="EditPlus"
meta name="Author" content=""
meta name="Keywords" content=""
meta name="Description" content=""
/head
script type="text/javascript"
!--
window.onload = function(){
var o = document.getElementById('openUrl');
o.onclick = function(){
// 输入的字符与网址的对应关系
var url = {
'aaa' : '0001.html',
'bbb' : '0002.html',
'ccc' : '0003.html',
'ddd' : '0004.html'
}
var key = document.getElementById('key').value;
// 如果存在改对应关系则打开，否则打开默认网址
window.open(url[key] || '默认网址');
}
}
//--
/script
body
input type="text" id="key" /input type="button" id="openUrl" value="打开网址"/
/body
/html
怎么用html5+js+css实现如图所示的搜索下拉框，谢谢
div class="searchModel"
select name="" id="" value="2"
option value="0"科室/option
option value="1"疾病/option
option value="2"医院/option
/select
input type="text" placeholder="请输入搜索内容"
button搜索/button
/div
style
html,
body,
div,
input,
select,
button {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.searchModel {
display: flex;
border: 1px solid orange;
border-radius: 4px;
overflow: hidden;
margin: 20px;
height: 44px;
}
.searchModel select {
color: #fff;
background: orange;
padding: 0 22px;
/* appearance: none; */
/* -moz-appearance: none; */
/* Firefox */
/* -webkit-appearance: none; */
/* Safari 和 Chrome */
}
select::-ms-expand {display: none;}
.searchModel select option{
color: #333;
background: #fff;
}
.searchModel input {
flex: 1;
padding: 0 10px;
}
.searchModel button {
width: 44px;
color: #fff;
background: orange;
}
/style
要改变下拉选项选中的样式，就用div去模拟下拉框
js部分，button提交表单，或者是div模拟提交ajax
网页制作 html,js搜索中的下拉菜单是怎么出来的
HTML代码：
div class="wrap"
div class="position fl"
a href=""合肥/a
/div
div class="serch fr"
input type="input" placeholder="请输入关键字" class="ser fl"/input type="submit" class="submit fl" value="搜索" /
/div
/div
div class="tanchu"
div style="background:#eaeaea;overflow:auto;height:300px;"
ul class="left"
li class="bg"安徽span class="fr"/span/li
li北京span class="fr"/span/li
li浙江span class="fr"/span/li
li湖南span class="fr"/span/li
li湖北span class="fr"/span/li
li江苏span class="fr"/span/li
li山西span class="fr"/span/li
li广东span class="fr"/span/li
li天津span class="fr"/span/li
li云南span class="fr"/span/li
li山东span class="fr"/span/li
li福建span class="fr"/span/li
li吉林span class="fr"/span/li
/ul
ul class="right"
li class="erji"
ul
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
li class="erji" style="display:none;"
ul
li杭州/li
li台州/li
li天台/li
li绍兴/li
li舟山/li
li宁波/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
li class="erji" style="display:none;"
ul
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
li class="erji" style="display:none;"
ul
li杭州/li
li台州/li
li天台/li
li绍兴/li
li舟山/li
li宁波/li
/ul
/li
li class="erji"
ul
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
li class="erji" style="display:none;"
ul
li杭州/li
li台州/li
li天台/li
li绍兴/li
li舟山/li
li宁波/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
li class="erji" style="display:none;"
ul
li合肥/li
li黄山/li
li芜湖/li
li巢湖/li
li六安/li
li淮南/li
/ul
/li
li class="erji" style="display:none;"
ul
li宣武/li
li西城/li
li海淀/li
li朝阳/li
li丰台/li
li昌平/li
/ul
/li
/ul
/div
/div
JS代码：
script
$(function(){
$(".position") .toggle(
function(){
$(".tanchu").show();
},
function(){
$(".tanchu").hide();
});
})
/script
静态网页中如何用js实现搜索功能？
table id="test"
tr
tdinput value="testsetsetestestsetsetsetset"/input/td
tdinput value="aaabbbaaabbbaaa"/input/td
tdinput value="testsetsetestestsetsetsetset"/input/td
/tr
tr
tdinput value="aaacccbbbbcccc"/input/td
tdinput value="testsetsetestestsetsetsetset"/input/td
tdinput value="testsetsetestestsetsetsetset"/input/td
/tr
/table
textarea name="txtBox" rows="7" cols="50" id="txtBox"
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样
菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
/textareabr
input type="text" value="输入要查询的内容" id="txtFind"
input type="button" value="表查找" onclick="searchclick()"
input type="button" value="简单查找" onclick="findText(txtFind.value)"
script language="javascript"
var searchobj = new Object;
var rng = new Object;
searchobj.row = -1;
searchobj.col = -1;
function searchclick(){
findText2("test",txtFind.value);
}
function findText2(tabname,str){
var tab = document.getElementById(tabname);
var rowobj = tab.rows;
//行数
var rownum = rowobj.length;
if(searchobj.row != -1 searchobj.col != -1 ){
var trobj = tab.rows[searchobj.row];
//列数
var tdnum = trobj.cells.length;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",rowobj[searchobj.row].cells[searchobj.col].childNodes[0].value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str){
return;
}
//如果上次查询结果是最后一列
if(searchobj.col tdnum-1){
for(var ii=searchobj.col+1;iitdnum;ii++){
rng = rowobj[searchobj.row].cells[ii].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str){
searchobj.col = ii;
return;
}
}
}
//如果上次查询结果不是最后一行
if(searchobj.row != rownum-1){
for(var i=searchobj.row+1;irownum;i++){
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;jtdnum;j++){
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT"){
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str){
searchobj.row = i;
searchobj.col = j;
return;
}
}
if(i==rownum-1 j==tdnum-1){
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
}
}
}
}
else{
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
}
}
else
{
for(var i=0;irownum;i++){
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;jtdnum;j++){
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT"){
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str){
searchobj.row = i;
searchobj.col = j;
return;
}
}
if(i==rownum-1 j==tdnum-1){
alert("没有您要查找的内容");
}
}
}
}
}
var rng = document.body.createTextRange();
function findText(str)
{
debugger;
if(str=="")
return;
//定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
//搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)
{
alert("搜索完毕");
rng = txtBox.createTextRange();
}
rng = txtBox.createTextRange();
}
/script
