包含js加html實現旅遊網頁搜索框的詞條

本文目錄一覽：

• 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