Question

我很难过。似乎有很多方法可以实现这一点，但我真的想找到一个不那么黑客的方法。我在输入后还包含左侧的分隔部分，其中有一个下拉列表。

这基本上就是我所追求的： http://jsfiddle.net/spadez/7BgYU/

<form name="multisearch" action="http://www.wittysparks.com/searchvideos/?q=" id="multisearchForm" method="get">
<ul class="ws_drop_down">
    <li><a href="#" title="Global Search"><span id="selectedsearch">ViDEOs</span>
    <![if gt IE 6]>
    </a>
    <![endif]>
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class='ws_drop_downm'>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/news/search/?q=','NEWs');" title="Search NEWs">NEWs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','ViDEOs');" title="Search ViDEOs">ViDEOs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','TOPiCs');" title="Search TOPiCs">TOPiCs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','QUOTEs');" title="Search QUOTEs">QUOTEs</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul><input class="multisearchInput" name="q" type="text" value="Type here & press enter" onFocus="this.value=''"/></form>

我真正想要的是一种将 INSIDE 放在输入框中的方法，而不是像本例中目前所做的那样。我知道这是可能的，因为谷歌在这里使用麦克风图标：

https://www.google.com/search?q=test

我的问题是，实现这一目标的最佳方法是什么，理想情况是最大程度的兼容性以及最少量的代码和黑客攻击。

Answer 1

回答这个问题，以便日后参考。

您可以将下拉列表包装在容器内，并在获得或删除焦点时更改其边框和其他css。

删除了下拉代码并添加了容器以提高可读性。您只需要包含元素和事件监听器的formcontainer。

<div id="formcontainer">
    <div id="dropdowncontainer">
        <!-- dropdown here-->
    </div>
    <div id="inputcontainer">
         <input class="multisearchInput" name="q" type="text" value="Type here & press enter" />
    </div>
</div>

并将其放入您的javascript代码中。

document.getElementById('multisearchInput').onfocus=function(){
    this.value='';
    document.getElementById('formcontainer').style['border'] ='1px solid red';
}

document.getElementById('multisearchInput').onblur=function(){
    document.getElementById('formcontainer').style['border'] ='none';
}

运行jsfiddle：http://jsfiddle.net/7BgYU/2/

在输入字段中插入下拉列表

1 个答案: