Home >Web Front-end >HTML Tutorial >Search drop-down box solution_html/css_WEB-ITnose
Search drop-down box solution_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:59991browse
<head> <title>无标题页</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} body,input,button,select,textarea{font-size:14px;font-family:Tahoma,Geneva,Verdana;outline:none;} body{margin:0;padding:0; font-size:12px; background-color:#f3f3f3} .clear{clear:both;} a{text-decoration:none;} a:hover{text-decoration:none ;} img{border:0} ol,ul{list-style:none;} div{ margin:0} /*搜索区*/.search_background{ height:21px; width:150px; background-color:#ffffff; float:left;border:0; color:#cacacc;margin:5px 0 0 5px;display:inline}.search_background .input_text{ float:left}.search_background .input_text input{ width:124px; height:20px; font-size:12px; line-height:20px;padding:0 3px 0 3px; border:0;}.search_background .search_button{ float:right; display:inline}.search_background .search_button a{ margin:3px 3px 0 0 } /*搜索下拉*/.search_ifo{width:149px;border: 1px solid #999; background-color:#fff;margin-top:30px;margin-left:-150px;float:left}.search_public{background:url(../images/short_dotted_line.png) repeat-x; height:25px;line-height:25px; text-indent:1em;}.search_public:hover{background-color:#e1e1e1;cursor:pointer;}.search_tip{height:30px;line-height:30px;color:#0098E1}.search_tip:hover{background-color:#e1e1e1;cursor:pointer;} </style></head><body><div> <div class="search_background"> <div class="input_text"><input type="text" /></div> <div class="search_button"><a href="#"> <img src="images/individual-headerandfooter/search.png" /></a></div> </div><div class="search_ifo"><div style="border-bottom: 1px solid #ccc;"> <div class="search_tip"> 搜“<span style="color:Red;">白</span>”相关信息»</div> <div class="search_public" ><span style="color:Red;">白</span>啊</div> <div class="search_public"><span style="color:Red;">白</span>啊</div> </div> </div> </div></body> 就是想在输入框输入字符后，下拉框显示相应的信息，比如说输入 白下拉框显示搜 白相关信息、再在下面显示相关白的信息列表
回复讨论(解决方案)
这是有个插件的，我前段时间还帮别人搞了个，只是里面有些修改的，是别人做的。
例子：http://s.dingso.com/ds.jsp?q1=设计玩具&q2=&q3_1=&q3_2=&q3_3=&q4=&Sortt=2&Periodd=3&startat=0
google 一个这个：autocomplete 就知道了
就是发ajax返回结果集后操作页面显示
a266f3dca0d5a4549e68239d2de8a2f4
6a74014ee44f5deb5894267f99b68016
ef1cac8df639bc9110cb13b8b5ab3dd7
08eb756f81b28a01d33212cce3fbe742 New Document 0e94189e2178ffcfb346fb78b3f60691
0669f2b47cbb7067128634f4f0953d44
5388429c24089aed11cb8ae3b590a146
01e410983daa13fc6e605ed406090f7b
2937621c2cf8e6da481a266cb373e463
c9ccee2e6ea535a969eb3f532ad9fe89
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
width:100%;
cursor:default;
}
.mouseout {
color:#000000;
width:100%;
background-color:#ffffff;
cursor:default;
}
531ac245ce3e4fe3d50054a55f265927
3caedeaf503d85604a662da0b0f02ae5
6424cb56fbc50ee5c005d81e322471d016b28748ea4df4d9c2150843fecfba68
// var autocomplete = new jsAuto("autocomplete","divautocomplete")
// handle event:
// autocomplete.handleEvent(value, returnObjectID)
// 36dd31b2201f051f76fd116d40705d4c
// step2 :
// add autocompete item:
// autocomplete.item(string)
// string must be a string var, you can split the string by ","
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")
// http://www.never-online.com
function jsAuto(instanceName,objID)
{
this._msg = [];
this._x = null;
this._o = document.getElementById( objID );
if (!this._o) return;
this._f = null;
this._i = instanceName;
this._r = null;
this._c = 0;
this._s = false;
this._v = null;
this._o.style.visibility = "hidden";
this._o.style.position = "absolute";
this._o.style.zIndex = "9999";
this._o.style.overflow = "auto";
this._o.style.height = "50";
return this;
};
jsAuto.prototype.directionKey=function() { with (this)
{
var e = _e.keyCode ? _e.keyCode : _e.which;
var l = _o.childNodes.length;
(_c>l-1 || _cfdbd1e73eb2044fd7bb829443fb7439a= l-1) ? _c=0 : _c ;
_o.childNodes[_c].className="mouseover";
}
if( e==38 && _s )
{
_o.childNodes[_c].className="mouseout";
_c--1c1e9d0663fbbe02fcc5941d8a943ff20 )
{
var arrMsg=msg.split(",");
for(var i=0; i62d542e6890a4e7bc629bc7a613422e7$1128dba7a3a77be0113eb0bea6ea0a5d0");
div.style.fontFamily = "verdana";
_o.appendChild(div);
}};
jsAuto.prototype.display=function() { with(this)
{
if(_f&&_v!="")
{
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visible";
}
else
{
_o.style.visibility="hidden";
}
}};
jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)
{
var re;
_e = event;
var e = _e.keyCode ? _e.keyCode : _e.which;
_x = [];
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");
_o.innerHTML="";
for(var i=0; ic8fd524fc5b92be0ee8d3e0e93a8a492
db271416853c42fd247a57c1a2c29eb6
34934661d7147ca926b095899343bad0
a64997a0904a094b4570728d7f327acd
ed9cd8c178ccec074ec49d084ebbdf9c
9cd56fa118928e35093c45c063272b3e
16b28748ea4df4d9c2150843fecfba68
4a249f0d628e2318394fd9b75b4636b1Autocomplete Function473f0a7621bec819994bb5020d29372a
be36754878d1c04af1a09c763c335e2c
4a2ff9297bcd8e280afd2809563a2b06
16b28748ea4df4d9c2150843fecfba68
2dcc8088a83ef7bd0df70c549668217e
Power By Miracle, never-online
16b28748ea4df4d9c2150843fecfba68
753e1b778fcd91c5a96f736eddb0d5b0
93bfa3c128111eb99c534364a222239c
db271416853c42fd247a57c1a2c29eb6
f2475bc0d02a524246eacdb398ec424e
6eac519e8537e4205ddd37e30a7b548a
谢谢大家了，希望有人可以根据我提供的信息编写一段，麻烦了！