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

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/