在输入字段中插入下拉菜单 [英] Insert dropdown inside input field

问题描述

我对此很难过。似乎有很多难以实现的方法，但是我真的很想找到一个不太符合要求的方法。我是在一个输入，其中还包含左侧有一个下拉菜单的分割部分。

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

 < form name =multisearch动作=http://www.wittysparks.com/searchvideos/?q=id =multisearchFormmethod =get> 
< ul class =ws_drop_down> 
< li>< a href =＃title =全局搜索>< 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 =搜索新消息>新消息< / a>< / li> 
< li>< a href =javascript：void（0）;的onclick =forWebSearch（ http://www.wittysparks.com/searchvideos/?q=','ViDEOs’）; title =搜索ViDEOs> ViDEOs< / a>< / li> 
< li>< a href =javascript：void（0）;的onclick =forWebSearch（ http://www.wittysparks.com/searchvideos/?q=','TOPiCs’）; title =搜索TOPiC> TOPiCs< / a>< / li> 
< li>< a href =javascript：void（0）;的onclick =forWebSearch（ http://www.wittysparks.com/searchvideos/?q=','QUOTEs’）; title =搜索QUOTE> QUOTE< / a>< / li> 
< / ul> 
<！ -  [if lte IE 6]>< / td>< / tr>< / table>< / a><！[endif]  - > 
< / li> 
< / ul>< input class =multisearchInputname =qtype =textvalue =在这里输入&按Enter键onFocus =this.value =''/> < /形式> 
  

我真正想要的是将 INSIDE 放入输入框，而不是外部像目前在这个例子中完成。我知道这是可能的，因为谷歌在这里用它的麦克风图标进行操作：

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

我的问题是，最好的方法是什么要达到这个目标，理想情况下需要最大限度的兼容性和最少量的代码和黑客行为。 解决方案

对于将来的引用很简单。

你可以将你的下拉列表包装在一个容器中，并改变它的边框和其他CSS焦点到达或移除。

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

 < div id =formcontainer> 
< div id =dropdowncontainer> 
<！ - 此处下拉菜单 - > 
< / div> 
< div id =inputcontainer> 
< input class =multisearchInputname =qtype =textvalue =在这里输入&按Enter键/> 
< / div> 
< / div> 
  

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

  document.getElementById（'multisearchInput'）。onfocus = function（）{
 this.value =''; 
 document.getElementById（'formcontainer'）。style ['border'] ='1px solid red'; 
 
 $ b document.getElementById（'multisearchInput'）。onblur = function（）{
 document.getElementById（'formcontainer'）。style ['border'] ='none ; 
} 
  

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

I am having a hard time with this. There seems to be quite a few grotty ways of achieving this, but I would really like to find one which is less of a hack. I am after an input which also contains a dividing section on the left which has a dropdown.

This is basically what I am after: 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>

What I am really after is a way of putting this INSIDE the input box, rather than the outside like is currently done in this example. I know it is possible because google does it here with its microphone icon:

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

My question is, what is the best way to achieve this, ideally with the most amount of compatibility and the least amount of code and hacking.

解决方案

Answering the question to keep it simple for future references.

You can wrap your dropdown inside a container and change its border and other css on focus attained or removed.

Removed dropdown code and added containers for readability. All you need is formcontainer containing both the elements and event listeners.

<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>

And put this in your javascript code.

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';
}

Running jsfiddle : http://jsfiddle.net/7BgYU/2/

这篇关于在输入字段中插入下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！