ホームページ >ウェブフロントエンド >htmlチュートリアル >検索ドロップダウン ボックス solution_html/css_WEB-ITnose
検索ドロップダウン ボックス solution_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:08:59990ブラウズ
<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")
// ハンドルイベント:
// autocomplete.handleEvent(value, returnObjectID)
// 8fd16206cac52dfd4362983bb3ee2f6c
// step2 :
// autocompete item:
// autocomplete.item(string)
// string は string var である必要があります。 string by ","
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")
// http://www.never-online.com
function jsAuto(instanceName,objID)
{
this._msg = [];
this._x = documentById( objID );
this._f = null; ;
this._r = null;
this._s = false;
this._o.style.visibility = "hidden"; = "絶対";
this._o.style.zIndex = "9999";
this._o.style.height = "50"; ;
jsAuto.prototype.directionKey=function() { with (this)
{
var e = _e.keyCode ? _e.keyCode : _e.that;
var l = _o.childNodes.length;
(_c>l-1 || _c
if( e==40 && _s )
{
_o.childNodes[_c].className="mouseout";
(_c >= l-1) ? _c=0 : _c ++;
_o.childNodes[_c].className="マウスオーバー";
}
if( e==38 && _s )
{
_o.childNodes[_c].className="mouseout";
_c-- _o.childNodes[_c].className="マウスオーバー";
}
if( e==13 )
{
if(_o.childNodes[_c] && _o.style.visibility=="visible")
{
_r.value = _x[_c];
_o.style.visibility = 「非表示」;
}
}
if( !_s )
{
_c = 0;
_o.childNodes[_c].className="マウスオーバー";
_s = true;
}
}};
// mouseEvent.
jsAuto.prototype.domouseover=function(obj) { with (this)
{
_o.childNodes[_c].className = "mouseout";
_c = 0;
obj.tagName=="DIV" ? obj.className="マウスオーバー" : obj.parentElement.className="マウスオーバー";
}};
jsAuto.prototype.domouseout=function(obj)
{
obj.tagName=="DIV" ? obj.className="マウスアウト" : obj.parentElement.className="マウスアウト";
};
jsAuto.prototype.doclick=function(msg) { with (this)
{
if(_r)
{
_r.value = msg;
_o.style.visibility = 「非表示」;
}
else
{
alert("javascript autocomplete ERROR :nn can not get return object.");
戻る;
}
}};
// オブジェクト メソッド;
jsAuto.prototype.item=function(msg)
{
if( msg.indexOf(",")>0 )
{
var arrMsg=msg.split(",");
for(var i=0; ic606e7b0c864aff1a8202c1e4a4800a4$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
414c7d57d02bb2310cc9c5d1e1452573
db44366a8e0b9645fa7bcefabf6a95a9
f2475bc0d02a524246eacdb398ec424e
6eac519e8537e4205ddd37e30a7b548a
谢谢大家了，希望有人可我提供的信息编写一段，麻烦了！